Easy css tooltips for a tag

by rajesh 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

Tagged in:


You must LOGIN to add comments