Page Elements' Content Displayed in Tooltips

This example demonstrates obtaining tooltip content from HTML elements that exist in the page. Those elements would be visible for browsers incapable of supporting the code.

A hoverable tooltip, and a sticky tooltip.

The documentation covers:

Script tags for external js files
Style specifications for the tooltip
Setting up tooltip content
Initialization and event handling setup
Specifying default properties
Advanced features of the code

JavaScript DHTML Tooltips

This tooltip uses unobtrusive event handling and is easy to set up. The code offers a variety of options for source and type of tooltip content and flexible control of positioning, formatting and display.

Tooltips can have different classes and have many other properties that can be specified differently for different links in the page.

The code is object based, avoids the use of global variables and provides accessibility and device independent features.

Note on Styles for HTML Elements to Appear in Tooltip

Using the tipContent class to apply styles won't work inside a tooltip. Instead either use div#tipDiv in the selector or the class you are applying to the tooltip. For example, if the element you want to display has an unordered list you could specify styles for display in the tooltip as follows:

div#tipDiv ul, div#tipDiv li {
    margin:0; padding:0; list-style:none;
    }

See styles in the head of this document, as well as code comments.

Back to index