<Martani/> Blog

In order to show a tooltip [in a web page] you may think about using some dirty javascript tricks to show and hide Divs and such...
But there is other better solutions, and these of course are using CSS and some magic :)! the ideas is the same as doing menus with CSS.

Let's suppose we want tool tips for our links a on the page, the ideas is to add position:relative to the element you want to be tooltipe(ed) -a link in our case- so that we can allow the label inside our link to be positioned absolutely respect to the parent (the link).

this is the CSS :

a.tt{
position:relative; /*this is the key*/
z-index:24;
}

a.tt:hover{z-index:25;}

a.tt label{display: none}

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