Clever Tooltips?

Abstract

These custom tooltips use non-intrusive Javascript to take the title attribute value, and display it in a custom style, positioned dynamically.

Example

This is some text with a hyperlink in it.

This is some more text with a hyperlink in it.

Code Used

  1. <p>This is some text with a <a href="#" title="This is some hyperlink title text">hyperlink</a> in it.</p>
  1. div.nicetitle {
  2. font: 11px/12px Verdana,Arial,serif;
  3. padding: 5px;
  4. -moz-border-radius: 3px;
  5. position: absolute;
  6. overflow: hidden;
  7. opacity: .80;
  8. color: #fff;
  9. background: #66a;
  10. border: 2px double #fff;
  11. }

See clevertooltips.js for the JavaScript. It was taken straight from the Horde.org webmail system, so I can’t claim to have done any of it.

Conclusion

You’ll notice that that HTML is really simple ‐ an anchor with a href and title attribute! No class, ID, or javascript hook; all that is done with non-intrusive Javascript. This means that use of it is simple.

Drawbacks include not being able to include HTML elements, the obvious requirement of javascript (though it falls back to the browser’s default interpretation of the title attribute), and, as the tooltip is added as a div to the body element, moving to hover over the tooltip means it disappears. Although this is non-intrusive and sorts out the cross-browser compatibility of positioning (and IE’s relative/z-index bug), it limits what can be contained within the tooltip, and when CSS is disabled, but Javascript isn’t, then nothing shows.

Tags