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 &lt;a class=&quot;tooltip&quot; href=&quot;#&quot;&gt;Tooltip&lt;span&gt;This is the crazy little Easy Tooltip Text.&lt;/span&gt;&lt;/a&gt;.

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

zip  Easy CSS Tooltip (690 bytes, 33.748 hits)


 

169 Kommentare »

9 Trackbacks

Seite 5 von 2«12
Kommentar schreiben

(erforderlich)

(required but will not be published)

(if you have one)

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


 
Produced and © by Koller Jürgen | Impressum | Love and Joy to everyone