Easy CSS Tooltip

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Easy CSS Tooltip</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Ron" />
<meta name="date" content="3/10/2009" />
<meta name="copyright" content="PayneLess Designs" />
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }

body {
font-size: 1.25em;
color: #000;
background: #808080; /* Gray */
}

div#wrap {
width: 85%;
margin: 2% auto;
padding: 10px;
border: 5px inset #070;
background: #dcdcdc; /* Gainsboro */
}

h1, h2, h3, h4 {
text-align: center;
color: #800000; /* Maroon */
}

p { margin: 2% 0; }

a:hover { background: #fff; text-decoration: none; } /*BG color is a must for IE6*/
a.tooltip span { width: 150px; font-size: .5em; display: none; padding: 2px 3px; margin-left: 8px; }
a.tooltip:hover span { display: inline; position: absolute; background: #fff; border: 1px solid #ccc; color:#6c6c6c; }
</style>

<!--[if IE]>
<style type="text/css">
div#wrap {
width: 95%;
margin: 2% auto;
padding: 10px;

}
p, pre { font-size: .65em; }
a:hover { background: #fff; text-decoration: none; } /*BG color is a must for IE6*/
a.tooltip span { font-size: .65em; display: none; padding: 2px 3px; margin-left: 8px; width: 160px; }
a.tooltip:hover span { display: inline; position: absolute; background: #ffffff; border: 1px solid #ccc; color:#6c6c6c; }
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<h1>Easy CSS Tooltip</h1>
<p>Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a></p>

<p>If you want to display a tooltip for a link, just add the class "tooltip" to the link and write your Tooltip Text in a span tag within the a tag - thats it.</p>

<h3>CSS:</h3>
<pre>
a:hover { background: #fff; text-decoration: none; } /*BG color is a must for IE6*/

a.tooltip span { width: 150px; font-size: .5em; display: none; padding: 2px 3px; margin-left: 8px; }

a.tooltip:hover span { display: inline; position: absolute; background: #fff; border: 1px solid #ccc; color:#6c6c6c; }
</pre>

<h3>HTML:</h3>
<pre>&lt;p>Easy &lt;a class="tooltip" href="#">Tooltip&lt;span>This is the crazy little Easy Tooltip Text.&lt;/span>&lt;/a>&lt;/p></pre>
</div>
</body></html>