Snap Builder HTML5 CSS3 Free Public Codes Library


<!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>