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.

22 Responses to “CSS Tooltip That Works With IE6”

  1. Bridgette

    I think this is one of the such a lot significant info for me.
    And i am happy studying your article. But want to observation on some general things, The
    site style is ideal, the articles is in reality nice :
    D. Good process, cheers

  2. Meilleur lisseur

    Thanks for your personal marvelous posting! I truly enjoyed reading it, you happen to be a great author.

    I will remember to bookmark your blog and will often come back in the future.
    I want to encourage you to continue your great work,
    have a nice morning!

  3. saltele ieftine fara arcuri

    I go to see day-to-day some blogs and websites to read content, however this web
    site offers quality based content.

  4. Cochrane appraiser

    That’s down from 41 percent calgary appraisal a decade ago.

    There are various ways that they can lower the risk of hearing lossSo far not a
    mmagic pill.

  5. top irons compared

    Hi there! This post couldn’t be written much better! Looking through this post reminds me of my previous
    roommate! He constantly kept preaching about this.

    I will send this post to him. Fairly certain he’s going to have a good read.

    I appreciate you for sharing!

  6. sbobet

    Your style is really unique in comparison to other folks I’ve read
    stuff from. Thank you for posting when you have the opportunity,
    Guess I will just bookmark this site.

  7. sbobet

    continuously i used to read smaller content which also clear their motive,
    and that is also happening with this article which I am reading at this place.

  8. monthlypassiveincome.pw

    Okay, thatís one thing before your competitors to fight
    the value of the people I follow what’s halpening all
    around the property and real estate investing, you possibly can. You can start
    creating income streams internet but if you weren’t one before.
    Thesde are the veryy rich moonthly passsive injcome due to
    tightened lending criteria. Do you put in. Hey, I passed the monhly passive income
    test of time to do this for yourselves. Single
    family housing generakly comes available in internet, you just
    win it blindly.

  9. georgiata.com

    Piece of writing writing is also a fun, if you be familiar with then you can write if not it is complicated to write.

  10. Elvis

    Muchas gracias ……..

  11. APOCALIPSISX

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

  12. Vikas

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

  13. Mark

    Awesome ! Thanks so much saved me hours!

  14. sac originaux

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

  15. jess

    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.

  16. virago

    nice tricks
    thanks

  17. Fenetres PVC 77

    Nice tips . and so many users still having IE6

  18. Albares

    Thanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for.

  19. vector art

    hey, I am junior designer and your website is very inspirefull for both rookies and advanced designers. Thanks !

  20. virren

    very good css code for me

  21. beside paul

    thank you for CSSTip 🙂

Leave a Reply

*