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, 10,179 hits)

(36 votes, average: 4.53 out of 5)
Willkommen! Mein Name ist Jürgen Koller, 27 Jahre alt aus Baden bei Wien & seit 2004 als selbstständiger New Media Producer tätig. Mehr über meine Arbeiten finden Sie im
Schalten Sie Werbung auf Kollermedia.at - über 34.000 Unique Visitors und 90.000 Pageviews pro Monat.







102 Responses »
9 Trackbacks
For all they have problems try this version of the script: http://www.hot-elle.de/2007-02-21/css-onmouseover-tooltippopup/
It’s worth noting thatt he critical detail for ie6 is that the background color (or possibly any other item that requires a whole-object re-render) must change.
So if you had a.tooltip {background:#ffffff;}
in the above example it would fail because with no change in the background no redraw occurs of the previously hidden span.
I haven’t experimented with it, but I suspect anything that forces a redraw of the whole A tag will make the difference.
Another one that does work is
a.tooltip {zoom:1;}
a.tooltip:hover {zoom:1.0001;}
(A warning though, zoom:1.00001 doesn’t work as it is rounded to 1, and 1.001 could be enough to perform a visible resizing of a full-screen-width panel.)
what a beauty ! there’s so many jquery tooltips out there but the simplicity of this is just too cool … muchas gracias !