Posted By

michellebracken on 08/18/11


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite


CSS Tooltips

 / Published in: CSS

You can create a lightweight CSS cross browser tooltip easily with a few lines of code. You can add more styles to suit your design. The key is the span is set to display: none until you hover over the link. When you hover over the link the display is changed to show inline and given a position of absolute. position: relative is necessary on the link in order to ensure the tooltip is positioned in relation to the link and not another containing element.

  1. The HTML:
  3. 1 This is the <a class="tooltip" href="#">Tooltip Link<span>This will be the text that shows up in the tooltip</span></a> You can place any text you want here.
  6. The CSS:
  8. 1 a.tooltip {position: relative}
  9. 2 a.tooltip span {display:none; padding:5px; width:200px;}
  10. 3 a:hover {background:#fff;} /*background-color is a must for IE6*/
  11. 4 a.tooltip:hover span{display:inline; position:absolute;}

Report this snippet  

You need to login to post a comment.