<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Derrived from the work of Eric Meyer
http://www.meyerweb.com/eric/css/edge/popups/demo.html
-->
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>| mikezilla | CSS Rollovers for tooltips</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--
<script type="text/javascript" src="mikezilla.js"></script>
<link rel="stylesheet" type="text/css" media="screen" title="" href="mikezilla-exp.css">
-->
<style type="text/css">
body {font: normal 14px/20px verdana;}
a:hover {background-color: #333;color:#fff;}
p.link a:hover {background-color: #2B2E21;;color:#fff;}
p.link a:link span{display: none;}
p.link a:visited span{display: none;}
p.link a:hover span {
position: absolute;
margin:15px 0px 0px 20px;
background-color: beige;
max-width:220;
padding: 2px 10px 2px 10px;
border: 1px solid #C0C0C0;
font: normal 10px/12px verdana;
color: #000;
text-align:left;
display: block;}
</style>
</head>
<body>
<p>
| <a href="http://www.mikezilla.com">mikezilla.com</a>
</p>
Tooltips using ONLY CSS, no JavaScript: Mike Golding 2002
<p class="link"><a href="http://www.notestips.com">link 1<span>Tooltip1: This link takes you to www.notestips.com - demo</span></a></p>
<p class="link"><a href="http://www.notestips.com">link 2<span>Tooltip2: This link takes you to www.notestips.com - another demo</span></a></p>
<a href="#" OnClick="return false;">No tooltip</a>
<br />
<p class="link"><a href="http://www.notestips.com">link 3<span>Tooltip3: This link takes you to www.notestips.com<br /> This tooltip is on...<br />...multiple lines - yet another demo</span></a></p>
<br />
© <a href="http://www.notestips.com">Mike Golding</a> 2002
<br /><br />
</body>
</html>