JavaScript Tooltips

Presenting dyn-web's 2008 Tooltip 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 numerous 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:

Examples in the Download File

Example documents in the download file demonstrate features of the code in isolation, making it easy for you to see how to implement them. They include:

  • Basic Tooltip Setup
  • Displaying content of HTML elements in the page in the tooltip
  • Multiple styles for tooltips
  • Hover Tip - tooltip you can hover over
  • Images and Text in the tooltip
  • Sticky Tooltip

More Information

See Documentation for basic instructions as well as more detailed information about advanced features of the code. See the list of online examples in the right column. The download file contains more examples.

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