Compatible Browsers:
Example: View Code Demo
<!DOCTYPE html>
<html>
<head>
<title>CSS Tooltip Popup</title>
<style>
/* Begin CSS Tooltip Popup */
/* This Script Free To Use Providing This Notice Remains */
/* This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library */
/* NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply */
body {font-family:verdana,arial,ms sans serif; font-size:90%;}
a.tooltip {
border-bottom:1px dotted #000;
color:#000;
outline:none;
cursor:help;
text-decoration:none;
position:relative;
}
a.tooltip span {
position:absolute;
top:2em;
left:1em;
width:250px;
margin-left:-99em;
opacity:0;
text-decoration:none!important;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:2px 2px 10px rgba(0,0,0,0.4);
-webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.4);
-moz-box-shadow:2px 2px 10px rgba(0,0,0,0.4);
-moz-transition-property:opacity;
-moz-transition-duration:1s;
-webkit-transition-property:opacity;
-webkit-transition-duration:1s;
-o-transition-property:opacity;
-o-transition-duration:1s;
}
a.tooltip:hover span {font-family:Calibri,Tahoma,Geneva,sans-serif; z-index:99; margin-left:0; opacity:1;}
a.tooltip.top:hover span {top:2em; margin-left:auto;}
a.tooltip img {position:absolute; border:0;margin:-10px 0 0 -55px; float:left;}
a.tooltip em {font:700 1.2em Candara,Tahoma,Geneva,sans-serif; display:block; padding:0.2em 0 0.6em 0;}
.custom {padding:0.5em 0.8em 0.8em 2em;}
* html a:hover {background:transparent;}
.info {background:#3f97b5; border:1px solid #2bb0d7; color:#fff;}
a.tooltip img.static {position:static; float:none; margin:0px; vertical-align:top;
}
</style>
</head>
<body>
<h4><strong>CSS Tooltip Popup Example:</strong></h4>
<div>
<ul>
<li style="list-style-type:none;">
<label for="email">First Name:</label>
<input id="email" name="email" type="text">
<a class="tooltip" href="#"><img class="static" src="http://opendb.hhs.gov/system/feed_types/icons/000/000/007/icon/icon_twitter.png?1359578480" alt="Information" height="25" width="25"/>
<span class="custom info"><em>Information</em>This is just an example of what you can do using a CSS tooltip. Feel free to get creative and produce your own!</span></a>
</li>
</ul>
</div>
<p>Roll your cursor over the blue twitter bird image for a tooltip example.</p>
<p><strong>Note:</strong> The blue twitter.com bird image is only used for this example... please replace this image with your own image.</p>
</body>
</html>