CSS Tooltips
This tutorial shows you how to make rollover ‘bubble’ style tooltips like the one I used in the Bloody Photoshop article. This method uses NO javascript and is completely done in css.
Step 1
Set up your link in HTML:
<a href="#" class="bubbleLink">The link<span class="bubble">tooltip text</span><span class="arrow"></span></a>
The first span will be used to display what ever you want in your tooltip, the second is for the tooltip arrow.
Step 2
The arrow image:
Design an image for the arrow on your tooltip or download the one I’ve used in this tutorial: 
Step 3
The css:
.bubbleLink{
}
.bubbleLink span, .bubble{
display:none;
}
.bubbleLink:hover .bubble{
display:block;
position:absolute;
border:1px solid black;
padding:2px;
background-color:#f3efe6;
margin-top:8px;
margin-left:40px;
}
.bubbleLink:hover span.arrow{
display:block;
background-image:url("images/arrow.gif");
width:12px;
height:12px;
position:absolute;
margin-left:50px;
margin-top:-2px;
}
What this does:
By using the display:none, the span’s inside that link are automatically set to be invisible, and when you roll over the link (:hover) the display is set to block, which makes them appear. You must use position:absolute or this will not work properly.
Using the margins I have told the arrow to display just on top of the tooltip box, thus giving it the appearance that it is all one element.
The margin-left and margin-top are only one way of doing this, you could also use left: , right: and z-index: as well.
Step 4
You should get a result like the one below:

Check out cooltips too, although it uses Prototype and JS.
Your code wins because it is done purely in CSS!
Although I must say that one downside to this is the extra markup required to achieve the tooltip effect.
sltrpdvmg rlcgepju sfrkgozbc lpsyvu nryo dfosb fbuokhcje