News:

MyKidsDiary.in :: Capture your kids magical moment and create your Online Private Diary for your kids

Main Menu

Code for Tool tip that appears on hover

Started by Kalyan, Dec 14, 2008, 08:40 PM

Previous topic - Next topic

Kalyan

Code for Tool tip that appears on hover

The most simple way is to use the 'title' attribute like this...

HTML
<span title="Example of the title attribute in use">like this</span>

CSS
a.tooltip {
position:relative;
cursor:help;
}
a.tooltip span {
display: none;
position:absolute;
top:1.5em;
left:0;
width:15em;
padding:0 2px;
}
a.tooltip:hover {
display:inline;
}
a.tooltip:hover span {
display:block;
border:1px solid gray;
background-color:white;
}

HTML

<a class="tooltip" href="#n">Karl Marx<span>-info goes here-</span></a>

Without this part... a.tooltip:hover {
display:inline;
}

..it won't work in IE.

The "#n" in the link is to prevent the page from jumping to the top if the link is clicked. The "href" part is necessary as it won't work in IE without it.

source : interviewghost