Snippets

CSS Tooltip

Simple tooltip in full CSS.

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

Source: http://www.kollermedia.at/archive/2008/03/24/easy-css-toolti...

Share this snippet

 
  • Jesse

    This is great! It works well and if you change the cursor on hover you add to the effect.

  • http://www.jalguide.in Rachit Garg

    the Tooltip is nice and easy….but the problem is that it does not position itself according to browser window…
    for instance:– if the link is on the right side of the screen the tool-tip goes out of window and thus becomes almost hidden.