advanced code snippet search

Posted By

michellebracken on 08/18/11


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

spee66
baamenabar


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.

Expand | Embed | Plain Text 
  1. The HTML:
  2.  
  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.
  4.  
  5.  
  6. The CSS:
  7.  
  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.