Pure CSS Tooltips - Add informative tooltips to your web page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser
Example: View Code Demo
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Pure CSS Tooltips</title> <style> /* Begin Pure CSS Tooltips */ /* == 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%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);} #content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;} span[data-descr] { position:relative; text-decoration:underline; color:#00F; cursor:help; } span[data-descr]:hover::after { content:attr(data-descr); position:absolute; left:0; top:24px; min-width:200px; border:1px #e6e6e6 solid; border-radius:10px; background-color:#ffffcc; padding:12px; color:#000000; font-size:14px; } </style> </head> <body> <div id="content"> <h3>Pure CSS Tooltips</h3> <p>This is an example <span data-descr="collection of words and punctuation">text</span> with a few <span data-descr="small popups which also hide again">tooltips</span>. Take a <span data-descr="not to be taken literally">look</span>...</p> <br /><br /><br /><br /><br /> <p> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_186.html">Pure CSS Tooltips Code Snippet</a> page. ] </p> </div> </body> </html>