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, 12,691 hits)
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.
Verfolgen Sie die News von Kollermedia.at bequem via RSS Feed:
111 Kommentare »
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 !
Hi, nice tip, it works great.
But now I discovered a problem. I use tooltips on a form page, which might be printed by the user. At the moment all tooltips are displayed on printout. I didn't found any way to hide them.
Any ideas. Thanks.
Just found the solution. To avoid any printout of the tooltip just add:
@media print { span {display:none;} }
If you might use span anywhere else, this items might not be printed either.
Thanks a lot men.... I am very happy with this great tooltip. The first that is easy to build in (for me).
Just to say thanks. This a great !
Thanks a lot... very nice...
so smart (h) , we can put an html in it of course
thanks for that
Hallo.
Dein Post ist ja schon was älter aber ich möchte einen kleinen Kommentar loswerden.
Dein Code funktioniert nicht in Webkit Browsern wie CHROME (IRON) oder SAFARI .
es gibt einen Konflikt mit
display: inline;
und
position: absolute;
im span style.
Beide beziehen sich auf Positionierung von Elementen und jeder Browser rendert das anders. (Ähnliche Probleme gibt es bei Anwendung von float, position und / oder display auf das selbe Element.
Wenn du erlaubst, hier der code der auch in Webkit Browsern funktioniert:
Easy CSS Tooltip - by Kollermedia.at; altered by therealanodyne
/* Easy CSS Tooltip - by Koller Juergen [www.kollermedia.at]; improved by therealanodyne */
* {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:15px; }
a.tooltip {
position: relative;
left: 300px;
top: 100px;
}
a.tooltip:hover {
background: #ffffff; /*BG color is a must for IE6*/
text-decoration: none;
}
a.tooltip span {
display: none;
padding: 2px 3px;
border: 1px solid #cccccc;
background: #fff; color:#6c6c6c;
width: 130px;
}
a.tooltip: hover span {
display: block;
position: absolute;
left: 100%; /*or more for some margin-left*/
top: 0%;
}
Easy TooltipThis is the crazy little Easy Tooltip
Text..
Für Erscheinen des Tooltips unter dem Link (oder beliebigen anderen Elementen in modernen Browsern):
a.tooltip: hover span {
display: block;
position: absolute;
left: 0;
top: 100%; /*or more for some margin-bottom*/
}
Vor oder über dem Link ist ebenfalls möglich jedoch nicht flexibel, da die Positionierung von width des Link Elements oder height des span Elements abhängt.
Vielen Dank für deinen Post,
wobei ich hoffe die kleine Verbesserung sit von Nutzen.
Peace,
Anodyne
Uuups, habe irgendwo den "
"-tag vergessen, sorry.Anodyne
Uuups, habe irgendwo den code-tag vergessen, sorry.
Anodyne