CSS Tooltips

Abstract

Simply a chance to test CSS only tooltips.

Example

This is a line of text. By hovering over this line a tooltip should appear.This is the text in the tooltip! This is the text in the tooltip! This is a link in the tooltip! This is the text in the tooltip! This is the text in the tooltip!

This is a line of text. By hovering over this line a tooltip should appear.This is the text in the tooltip! This is the text in the tooltip! This is a link in the tooltip! This is the text in the tooltip! This is the text in the tooltip! More text more text more text

Code Used

  1. <p>This is a line of text. By hovering over this line a tooltip should appear.<span class="tooltip">This is the text in the tooltip! This is the text in the tooltip! <a href="#">This is a link in the tooltip!</a> <span class="tooltip2">This is the text in the tooltip!</span> This is the text in the tooltip!</span> More text more text more text</p>
  1. p {
  2. position: relative;
  3. }
  4. span.tooltip {
  5. display: none;
  6. }
  7. p:hover span.tooltip {
  8. display:block;
  9. position:absolute;
  10. top: 1em;
  11. left: 0;
  12. border: 1px dashed #FF0000;
  13. background: #FDD url(/images/information.png) no-repeat 5px 5px;
  14. color:#000;
  15. padding: 5px 5px 5px 25px;
  16. /*margin: 0 0 0 200px;*/
  17. font-size: smaller;
  18. width: 15em;
  19. z-index: 1000;
  20. }
  1. <!-- The line below starts the conditional comment -->
  2. <!--[if IE]>
  3. <style type="text/css">
  4. body {behavior: url(csshover2.htc);}
  5. p:hover span.tooltip {
  6. /*margin: 1em 0 0 -400px;*/
  7. }
  8. </style>
  9. <![endif]-->
  10. <!-- This ends the conditional comment -->

Conclusion

They work, allow images and links within the tooltip. Clean HTML. Without JavaScript to position them though, the appear in different places in different browsers, hence the (currently commented out) attempt at using margins to position. IE of course needs the behaviour to allow :hover pseudo-class to apply to anything except an anchor (a span in this case)

Tags