CSS Tooltip That Works With IE6

A tooltipThis is a pure CSS tooltip window is a great way to present the user with a small popup when they hover over a link or an image. Some designers even use tooltip instead of a javascript popup window to ensure their message is read in case the user has javascript turned off in their browser.

I’ve used many different types of tooltips in the past and they all shared the same problem, they do not work with Internet Explorer 6. After many trial and error, I finally have a pure CSS tooltip that works in IE6.

HTML Code:

<a href="#" class="tooltip">Your Link Here
<span> Tooltip message you want to appear. </span></a>

Here’s the CSS code:

a.tooltip {
	color: #7C98AE;
	text-decoration: none
	}
 
a.tooltip:hover {
	position: relative;
	text-decoration: none
	}
 
a.tooltip span {
	display: none
	}
 
a.tooltip:hover span {
	display: block;
   	position: absolute; 
	top: 0px; left: 40px;
	width: 200px;
        padding: 5px; 
	margin: 10px; 
	z-index: 100;
        background: #f0f2f6; 
	border: 1px solid #955F1F;
	opacity: 0.9;
	text-align: center
	}

This CSS tooltip works with IE6, IE7, IE8, Firefox, Chrome, Flock and Opera. If you have your own CSS tooltip solution please share them here.