Easy CSS Tooltip

March 24, 2008 | 102 Kommentare | 95,020 views | Scripts etc.

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):

  1. a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
  2. a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
  3. a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
  1. 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)


 

102 Responses »

9 Trackbacks

Easy CSS Tooltip | David Bisset: Web Designer, Coder, Wordpress Guru Tooltips mediante CSS « Xyberneticos Easy CSS Tooltip » Easy CSS ToolTip code, does not get easy than this ! URIELMANIA» diseño » Tooltips mediante CSS בלוגה של אמא » links for 2008-03-31 Pereyrada » Tooltip con CSS CSS-Tooltips: Infoboxen über HTML-Elementen erstellen « Sura 1 Artworks Generar un tooltip con CSS | Emilio José Rodríguez García
Elias | Reply to this comment
commented on March 17, 2010 at 9:36

For all they have problems try this version of the script: http://www.hot-elle.de/2007-02-21/css-onmouseover-tooltippopup/

Chaos Crafter | Reply to this comment
commented on March 19, 2010 at 4:32

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.)

dario | Reply to this comment
commented on March 19, 2010 at 16:14

what a beauty ! there’s so many jquery tooltips out there but the simplicity of this is just too cool … muchas gracias !

Page 4 of 4«1234
Leave a Reply

(required)

(required but will not be published)

(if you have one)

Bild einfügen:<img src="http://www.website.com/meinbild.jpg" alt="bildbeschreibung" />

« Sydney Team E – just amazing
Barack Obama – A More Perfect Union »


Aktuelle Kommentare

Über Kollermedia.at

Jürgen Koller BA (Hons.)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 Work Bereich.
WerbungSchalten Sie Werbung auf Kollermedia.at - über 34.000 Unique Visitors und 90.000 Pageviews pro Monat.
mehr Informationen
RSS IconVerfolgen Sie die News von Kollermedia.at bequem via RSS Feed:

Empfehlung

Empfehlung

Portfolio Showcase

Dancingstars.orf.at Gault Millau okidoki shapeshifters APA OTS Nationalratswahl ORF Das Rennen BÖrsegebäude Wien Touchscreens Programm.orf.at
 

Letzte Updates