JavaScript Tooltips

Presenting dyn-web's JavaScript Tooltips with unobtrusive event handling and easy setup. The tooltip 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. The download file also provides examples.

Note to Touch Device Users

Tooltips are not enabled for touch devices on this page. The code supports touch, but not all tooltip implementations makes sense in that context.

For more information see the footnote below and the documentation. To see the code demonstrated on your touch device view the demos listed on the upper right and Tooltips and Touch Devices.

Tooltip Features and Options

Tooltip features are described and demonstrated [1] in the list below.

  • The tooltip can be activated onmouseover or onclick. Keyboard users can also activate tooltips for some elements on focus.
  • 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.
  • Several choices and options for positioning the tooltip are provided in the code.
  • The tooltip is hidden onmouseout by default (when activated onmouseover) but it can also be "sticky" or hidden after a specified duration.
  • You can choose the style of close link or close image for sticky tooltips, for touch devices or when activating onclick.
  • Event handling is unobtrusive and uses event delegation.
  • Object based code avoids the use of global variables
  • Accessibility and device independent features are included.

More Information

The code is known to work for Internet Explorer 6+, Firefox, Opera, Safari, Chrome and should also support any other relatively up-to-date browser. The code also works for Safari on iPhone/iPad and a variety of browsers on Android.

The examples listed on the upper right provide more information about code usage. Tooltips on Touch Devices demonstrates and provide more information on the code's support for touch screen users.

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.

Back to top

  1. Touchscreen users will not see the tooltips on this page. Even though the tooltip code provides support for touch devices when appropriate, links for navigation that display a tooltip on mouseover don't make sense on a touch device. See the Tooltip Demos listed on the upper right, Tooltips and Touch Devices and the documentation for demonstration and more information about tooltip support for touch devices. ^