CSS Tooltip Popup - Add a tooltip box for showing information or instructions.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser
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>