Hidden Page Content in Tooltips

This example demonstrates and describes how you can use JavaScript Tooltips to display HTML elements that exist in your page in tooltips. Generally, tooltip content is not available for search engines, for those with JavaScript disabled, or for incapable browsers, but with this approach it is fully accessible.

Attach a class of tipContent and browsers capable of performing the tooltip will not display that content on the page. Yet it remains in the markup for incapable browsers and search engines. Here we demonstrate with a hoverable tooltip and a sticky tooltip. The content for both of these is viewable in the source code of this page near the bottom.

Instructions for Hidden In-Page Content to Tooltips

Suppose you have an element with an ID of menu1 that you wish to display in a tooltip. A link to display that tooltip would be set up as follows:

<a href="#" class="showTip menu1">link</a>

The class showTip signifies the link is to display a tooltip; menu1 is the ID of the element whose content is to be displayed in the tooltip.

The content_source property tells the JavaScript where to look for tooltip content. The following tells the JavaScript to look to the class name for an ID of an element in the page to display in the tooltip.

dw_Tooltip.defaultProps = {
    // id of element to display follows showTip in class name
    content_source: 'class_id'
}

In order to hide the tip content elements from capable browsers, include a call to a function that checks browser capabilities and writes a style rule to hide elements with a class of tipContent:

dw_Tooltip.writeStyleRule();

Download, Documentation, and More

The JavaScript Tooltip download file includes an example demonstrating hidden page elements in tooltips. The ability to display page elements in tooltips can be combined with other features and options in the JavaScript Tooltip: for example, hoverable and sticky properties as well as the klass property and alternating positioning functions. Find out more in Part Two of the documentation.

The documentation covers:

JavaScript 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.