Easy CSS Tooltip
If you need a really simple and basic Crossbrowser Tooltip on your website, this <1kb tooltip CSS script might be the one for you.
Here is the 4 line magic (3lines css, 1line html):
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.
If you want to display a tooltip for a link, just add the class "tooltip" to the link and write your Tooltip Text in a span tag within the a tag - thats it.
Demo
Easy TooltipThis is the crazy little Easy Tooltip Text..
Tested with
IE5, IE 5.5, IE 6, IE7, Safari 3.1, Latest Firefox & Opera Version.
Download this Script
Easy CSS Tooltip (690 bytes, 23.419 hits)
Willkommen! Mein Name ist Jürgen Koller, wohnhaft in Baden bei Wien. Seit 2004 bin ich als selbstständiger New Media Producer tätig. Mehr über meine Arbeiten finden Sie im 
Schalten Sie Werbung auf Kollermedia.at - über 30.000 Unique Visitors und 65.000 Pageviews pro Monat.
Verfolgen Sie die News von Kollermedia.at bequem via RSS Feed:
159 Kommentare »
9 Trackbacks
cool! funktioniert tadellos - http://photographer-in-ny.com/
Holy craps. Thank you, this is the easiest, least bloated version of tool tips I've ever seen, short of Firefox using anchor titles. I thank you for something I'll use numerous times in the future.
You're welcome Josh
In Safari 3.1 (Mac) works ok too
Thanks for testing Jorge
Simply brilliant. Will come in very handy. Appreciate your sharing.
thanks for such a useful tips. i found that this is the most easy way write a tooltip.
It's fantastic! but if i want show differents tooltips ,how can i do?
If i put this code with more tooltips when the mouse is over the link, all the toltips are show.
Hi Waixo, there should be no problem with more tooltips - you can use as much as you want. There is always just one visible...
You can send me a link if you want - i'll have a look
Hi webdawson, you have reason! It's incredible! Thanks a lot!
Always it's fantastic know this things!
Again i want say Thank you for your apportation in the world!
Hello. I used the span tooltip and it works great in every browser except IE 6.0.
I'm using the span tooltip code you posted on html column table headers. When you get near the column the tooltip will appear and not allow you to access the controls (ie: checkbox, text box, etc.) which it is covering. Therefore column header 1 tooltip overlaps column 2 and you can't initiate the column 2 tooltip. I am only seeing this behavior in IE 6.0 and IE 7, Firefox 2.0+ and Safari display the span properly. And only seeing this behavior when the tooltip is used in close proximity of other tooltips on IE 6.0. Unfortunately I have 3000K+ users who are required to use IE 6.0. If you may provide any help with a solution for IE 6.0 or post the new code with the changes that would be great. Have you had an opportunity to see this on IE 6.0? Have a good week.
Fantastic bit of code - very light weight (3 line)
Top job
Unless I'm missing something... it doesn't work for me. On a MAC using FF.
This is what I see on your demo link:
Easy TooltipThis is the crazy little Easy Tooltip Text..
hi erica..mh crazy...safari-mac is ok...
Nice little piece of code! But unfortunately, when I use it with IE the tooltip won't overlap any links. Undelaying text works well, but any links show up as if they where part of the tooltip. When I turn off "position:relative" for the anchor element it works, but then I can't position the tooltip next to the desired element, as Firefox starts positioning all tooltips from the very left if i only use Position:absolute, which again works fine in IE. I was wondering if somebody knows a fix to this problem? thank you, regards Jorg
Wow, this... this seems too good to be true! If I didn't see it working with my own two eyes, I wouldn't believe it!
I've spent the last two hours looking for different ways to get tooltips on my blog, and this is the only one that I've been able to get to work.
Magnificent work!
Hi Chris thanks for your kind words
How about license? Is it MIT license?
Hi Lee, you can use the script for private and commercial websites. So just use it wherever you need it
Thanks for this great code Jürgen. Was a lot simpler to implement than some of the other over-complicated solutions out there.
Works well in Firefox 3 too. Cheers!
Thanks for your feedback Richard
Thank you for this cool tooltip!
It's very useful and handy. I was looking for such good thing for a long time!
BTW works fine in Opera 9.25, Firefox 1.0.2, Konqueror 3.3.2.
Thanks xHire!
Hi, very useful tool tip.
Is possible to change the position of the tooltip ? instead of on the right, to be displayed on the left/top/bottom ?
I tried to externalize the CSS in a stylesheet but I can only get it to work by embedding it in the page where it's being used (with style tag). When in an external style sheet it renders all the tip text, no hover or anything, just displays everything in the spans. Any ideas? It would negate the beauty of this code to have to replicate this in every page where we're using the tips.
Sorry Webdawson, please disregard my last comment about externalizing the CSS. It works beautifully!
Wow, I was impressed with the easiness of this tooltip script.
This is what I'm looking for to use on my next web apps project
man this is the simplest one I've seen so far.. just tried it on my blog, and it just rocks! thanks aload
You're welcome