CSS Tooltip

Taking advantage of Absolute positioning

by prasun_sultania

HTML

<p>
    <a href="http://www.google.com/" class="tooltip">
I am a 
        <span> (This website rocks) </span></a>&nbsp; developer.
</p>

CSS

a.tooltip {
    position: relative;
}

a.tooltip span {
    display: none;    
}

a.tooltip:hover span, a.tooltip:focus span {
    display:block;
    position:absolute;
    top:1em;
    left:1.5em;
    padding: 0.2em 0.6em;
    border:1px solid #996633;
    background-color:#FFFF66;
    color:#000;
}