Tooltips

What is a tooltip? This is a tooltip an aiding text that appears just when you roll on with the mouse , using pure css popups a very easy way to get dynamic effects on an html page without using javascript.

Now, let's have a look at the basic css cascade style sheets, the separation from content and presentation code for the tooltip:

Code:

<style>

a.info {
    position:relative;
    z-index:24;
    background-color:#ccc;
    color:#000;
    text-decoration:none
}

a.info:hover {
z-index:25;
background-color:#ff0
}

a.info span { display: none }

a.info:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em;
    left:2em;
    top:2em;
    border:1px solid #0cf;
    background-color:#cff;
    color:#000;
    text-align:left
}

</style>

<a class=info href="#">This is a tooltip
<span>an aiding text that appears just when you roll on with the mouse</span>
</a>

Code from Eric Meyer