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.


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, 35.312 hits)

174 Kommentare

Kommentar verfassen

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