Easy css tooltips for a tag
by rajesh[ Edit ] 2010-01-17 12:13:09
The easiest way to give a link or anchor tag tool tip is using css.
Just copy the code in to you header create you links as explained below.
a.tip {
position: relative;
}
a.tip span {
display: none;
position: absolute;
top: 20px;
left: -10px;
width: 125px;
padding: 5px;
z-index: 100;
background: #676777;
color: #fff;
-moz-border-radius: 5px; /* this works only in camino/firefox */
-webkit-border-radius: 5px; /* this is just for Safari */
}
a:hover.tip {
font-size: 99%; /* this is just for IE */
}
a:hover.tip span {
display: block;
}
Links should be as
<a href="http://hioxindia.com/" class="tip">hioxindia.com <span>Best Web Hosting and Domain Services</span></a>
two things here to note are
1) class should be defined with the same name as the style is created. In this example class="tip"
2) what ever you want as tooltip should be give inside a tag between span tags
