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 class="customtooltip" href="#">Custom Tooltip <span>Custom Tooltip</span></a>.

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

Example:
This is Custom Tooltip Custom Tooltip.