DOM Tooltip

DOM Tooltip (aka domTT) is a Javascript widget, released under the Apache 2.0 license, which allows developers to add customized tooltips (context help bubbles) to their web sites. The tooltips are customized using style class definitions and respond to browser events, such as a 'mouseover' event. When creating the dynamic layers, the library detects and resolves possible collisions with form elements (such as SELECT elements, which float above the html surface) and screen edge bleeding.

While the library was originally designed to simply create context help tooltips, it has since grown into a significantly more versatile script. It is now possible to create a wide variety of dynamic layers, such as embedded windows, context menus and hidden blocks. Additional features of the library include sticky tips, tooltip fading, lifetime, relative positioning, class assignments, width adjustments, mouse dragging, captions, directionality, offset adjustments, adjustable activate/deactivate delay times, snapping to grid, fate adjustment (hide or destroy) and references to created tips. In short, this library is everything you need to create dynamic layers in the webpage.

To understand the different types of tooltips, please navigate through the demo to get a visual picture of the functionality first hand.


Version Release Focus Date Link
0.7.3 Major bug fixes and enhancements 2006/06/12 [ Download ]
0.7.2 Minor bug fixes, addition example 2006/04/12 [ Download ]
0.7.1 Major bug fixes, better docs, apache license 2005/07/16 [ Download ]
0.7.0 Mac support, fixed IE memory leaks 2004/11/10 [ Download ]
0.6.0 Major rewrite, better option names 2003/02/13 [ Download ]
0.5.5 Fixed IE crashes, fixed coding errors 2003/02/09 [ Download ]
0.5.0 Konqueror fixes, demo updates, new options 2003/12/19 [ Download ]
0.4.5 New options, IE fixes, compliance 2003/12/06 [ Download ]
0.4.0 Major code reduction, rendering fixes 2003/12/02 [ Download ]
0.3.0 Opera support, major enhancements, demos 2003/11/30 [ Download ]
0.2.0 Major enhancements, cascading options, examples 2003/11/20 [ Download ]
0.1.1 Initial release 2003/10/30 [ Download ]


Hover Wordpress Plugin
Building on the behaviour technique, which uses CSS selectors to apply javascript actions, Stefan Volkel extended DOM Tooltip to created this plugin for Wordpress that replaces keywords with links and an optional popup.
Ubernyms: the ultimate text-replacement plugin
The purpose of ubernyms is to allow you configure a set of frequently used abbreviations that will be automatically encoded nicely whenever you use them. The goal is to make them visible in a way that is literate for both humans and computers. In other words: we tag them appropriately for your computer, and expand them as necessary for humans.


Read what people are saying about DOM Tooltip!

Michael Hawkins:

I just wanted to thank you for DomTT; it has been a real lifesaver for me. We have been using the tooltip snippet provided by Macromedia to create interactive mouseovers to describe various textual artifacts, such as spans of text that have been deleted, but it does not compare with yours in any way shape or form (esp. when it comes to positioning and collision detection).


Thanks for an absolutely amazing script. This is something I'm wishing I had a long time ago. It is fantastic.


I must've tried dozens of tooltip scripts, and all of them were either coded in an extremely ugly way, didn't work, were hard to customise, or a combination of all. Your script is great, it's everything i was ever looking for! Thanks.

DOM Tooltip In Action

  1. MyFaces Schedule Component
  2. OS Projekt OWL
  3. DokuWiki
  5. Kansas City infoZine News
  7. ArubaTips

In addition to the links above, the core library behind both DOM Tooltip and DOM Menu, domLib, was used by the JPortal project to create the WebDDM script, a menu generator written in javascript. It is also included in the VSP Stats Processor project.