CSS Tooltip That Works With IE6

Posted on: January 31, 2010 — 12 Comments

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.

Fancy CSS Content Box Strictly for beginners only, if you are a CSS guru...
Speed Up and Reduce Your CSS File Cascading Style Sheets otherwise known as CSS has become one...
7 CSS Layout Tips The most difficult thing in CSS to get right is...

12 Comments for "CSS Tooltip That Works With IE6"

Alguien sabe como hacer que funcione con otro tipo de etiqueta por ejemplo en internet explorer 6 ?

Reply To This Comment

APOCALIPSISX — March 29, 2012

hey, thank you for the this CSS….really worked for me… thank you

Reply To This Comment

Vikas — March 14, 2012

Awesome ! Thanks so much saved me hours!

Reply To This Comment

Mark — February 14, 2012

great tips to avois using javascript for this kind of bonus for the user

Reply To This Comment

sac originaux — February 18, 2011

the problem with this idea is that IE7 will apply its z-indexing madness to it (http://verens.com/2005/07/15/ie-z-index-bug/), so if you have a tooltip that could potentially overlap another tooltip “trigger”, the tooltip trigger will show through. You typically won’t be able to solve this without using js.

Reply To This Comment

jess — November 10, 2010