InsertCode: <Br/>
<A class = "tooltips" href = "# tooltips"> ihandu <span> Ducky's private life </span> </a>
<Style type = "text/CSS">
A: Link, A: visited {text-Decoration: none; font-family: verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #453739 ;}
A: hover {color: # c86f70; text-Decoration: none ;}
/* Tooltips */
. Tooltips {
Position: relative;/* This is to locate the box next to the text */
Z-index: 2;
}
. Tooltips: hover {
Z-index: 3;
Background: none;/* not available in IE */
}
. Tooltips span {
Display: none;/* generally, the characters in the span are not displayed */
}
. Tooltips: hover span {/* The span label is only displayed in the hover status */
Display: block;
Position: absolute;
Top: 21px;
Left: 9px;
Width: 15em;
Border: 1px solid # c7bc98;
Background-color: # ebe2c8;
Padding: 3px;
Color: black;
}
</Style>
You can use this method to create many styles of tooltips. This method can be used in IE and Firefox.