JavaScript DHTML Tooltips

Presenting dyn-web's JavaScript DHTML Tooltips with unobtrusive event handling and easy setup. The code offers a variety of options for source and type of tooltip content and flexible control of positioning, formatting and display. The JavaScript is object based, avoids the use of global variables and provides accessibility and device independent features.

See the list of online examples on the right. See the list of features below. The Documentation covers basic instructions as well as more detailed information about advanced features of the code. The download file contains basic examples facilitating implementation of the code to suit your purposes.

Tooltip Features and Options

  • Tooltip content can be held in a variable, obtained via Ajax, or it can come from HTML elements in the page.
  • Tooltip content can include images, images with text, and a caption as well as other rich HTML.
  • Alternate classes and formatting can be used in displaying individual tooltips.
  • The tooltip can contain clickable links using a hoverable option.
  • Various positioning algorithms and position control options are included.
  • The tooltip can be can be "sticky", hidden after a specified duration, or by default, hidden onmouseout.
  • Event handling is unobtrusive and uses event delegation.
  • Object based code avoids the use of global variables
  • Accessibility and device independent features are included.
  • The tooltip is compatible with select lists for Internet Explorer

Demonstrating select list near tooltip:

More Information

The examples provide more information about code usage.

See Documentation for basic instructions as well as more detailed information about advanced features of the code. The download file contains basic example documents making it easy for you to see how to use the code.

See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.

Back to top