Tooltip using CSS

Do you want to have custom tooltip without using JavaScript in your website? Using following code you will have custom tooltip in your website.

<style type=”text/css”>

a:hover {
background:#ffffff;
text-decoration:none;
} /*BG color is a must for IE6*/
a.customtooltip span {
display: none;
position: absolute;
padding: 2px 3px;
margin-left: 2px;
}
a.customtooltip:hover span {
display: inline;
background: #ffffff;
border: 1px solid #cccccc;
color: #6c6c6c;
}

</style>

Now use following HTML code that will generate custom tooltip on link.

This is <a target="_blank" class="customtooltip" href="#">Custom Tooltip<span>Custom Tooltip</span></a>.

Inner html tag in is using for tooltip text. By default this text is hidden popped up when user move mouse on Link.

Advertisements