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, 26.099 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 33.500 Unique Visitors und 70.000 Pageviews pro Monat.
Verfolgen Sie die News von Kollermedia.at bequem via RSS Feed:
160 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
Thanks for the simple tooltip code. It very usefull for me now !
Thanks for the simple tooltip code. It very
Uuups, habe irgendwo
tag vergessen, sorry.
tooltip code. It very usefull for me
Thanks for the simple tooltip
irgendwo den code-tag vergessen, sorry
Excelent! simple and elegant and easy to style. You rock!
Very nice indeed, thanks for sharing it!
Thanks - very nice and simple. Appreciate it
Thanks, five minutes and done... save my life:D
Hey! Just dropping by to let you know my experience with this. I am going to be writing a blog about it as well. I'll comment up the link when I'm done with it and we think of a solution.
Anyhow, a couple things.
This ironically to me works better in Internet Explorer 8 on a Windows 7 Home Premium Operating System.
In Internet Explorer (I dont know if all, but 8 allow atleast) allows you to insert a link inside of the Tooltip. The tooltip obviously will disappear when you move away from the link with your mouse. How do we set a delay time for that to disappear?
Very usefull tutorial man ill use it surely. Thanks
Perfect...
Thank you so much...
Amazing. Thanks a lot.
Thanks for the awesome guide! Nice and simple, but does the job! A++
wow,, it's very simple
what is needed to affect the size of the font used in the tooltip?
Hi Brent,
just add: font-size:14px; (or the font-size you want) in the a.tooltip span {} line
Example:
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px; font-size:14px;}