Tooltip Documentation

Page Topics:

This page provides documentation for dyn-web's JavaScript DHTML Tooltips. The best starting point when implementing the tooltips is to choose an example document from the download file that most closely resembles your desired implementation. Follow the pattern set there and read below for details and clarification.

Documentation for the tooltip consists of two parts. This page covers basic instructions and general information for setup and use of the tooltip. Part Two provides more information for controlling features and options of the code, including how they can be specified for individual tooltips.

Instructions

The following list outlines the steps for implementing the code. Details on each step are available below.

  1. Include script tags pointing to the external JavaScript files.
  2. Include style specifications for the tooltip.
  3. Set up links and content for tooltips.
  4. Initialize the code and event delegation.

Script Tags

Place script tags for the external JavaScript files in the head of your document: 

<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_viewport.js" type="text/javascript"></script>
<script src="js/dw_tooltip.js" type="text/javascript"></script>
<script src="js/dw_tooltip_aux.js" type="text/javascript"></script>

^

Tooltip Styles

If all your tooltips are to have the same styles you can apply them to tipDiv, the div element automatically generated by the code. Some examples use the following styles, which you can adjust:

div#tipDiv {
    padding:4px;
    color:#000; font-size:11px; line-height:1.2;
    background-color:#E1E5F1; border:1px solid #667295; 
    width:250px; 
}

Style specifications are placed in a style sheet, either in the head of documents using the tooltip or in an external style sheet.

If you would like to display the tooltip with varying styles, you can make use of the klass property. Part Two of the documentation describes. ^

Tooltip Links and Content

When you want a link or other page element to display a tooltip, include a showTip class followed by a second class which serves as a locator for the code. For example, links to display tooltip content can be set up as follows:

<a href="." class="showTip link1">link one</a>
<a href="." class="showTip link2">link two</a>

The code uses that second class name to find the content in dw_Tooltip.content_vars: 

dw_Tooltip.content_vars = {
    link1: 'Tooltip content for link 1',
    link2: '<div class="img"><img src="images/dot-com-btn.gif" /></div>'
}

The code supports images and other rich HTML in the tooltips. That content can either be included as a string as the above demonstrates, or content can be provided as img, txt, caption or other properties in the content_vars entry for a given link, as the images and text example demonstrates. Examples in the download file makes it easy for you to see how these are set up.

The tooltip code also provides support for other content sources such as HTML elements within the page to which you have assigned a special class of tipContent, and ajax.

Although tooltips are generally used with links, including links surrounding images, they can be attached to other elements as well:

<span class="showTip span1">span text</span>

The Positioning example demonstrate the tooltip on table cells. ^

Initialize the Tooltip Code and Event Delegation

The tooltip is initialized in the dw_tooltip_aux.js file with the following:

dw_Event.add( window, 'load', dw_Tooltip.init );
dw_Event.add( window, 'load', dw_Tooltip.initHandlers );

Event delegation[1] set up in initHandlers monitors both mouseover and focus events. Event delegation avoids not only having to add event handler attributes in your HTML tags but also avoids looping through document elements once the page loads to locate and attach event handlers. ^

Setting Default Properties

The tooltip code has some special features that can be controlled with default property settings. For example, if you would like your tooltips to be hoverable you would specify that as follows: 

dw_Tooltip.defaultProps = {
    hoverable: true
}

If you would like your tooltips to be sticky, positioned in the center of the window you would specify that with the following:

dw_Tooltip.defaultProps = {
    sticky: true,
    positionFn: dw_Tooltip.positionWindowCenter
}

Part Two of the documentation includes a list of properties provided and describes their purpose. The download file contains examples that demonstrate use of code properties, making it easy for you to see how they are used.

Individual Tooltip Properties

Most of the properties available for defaults are also available for specific tooltips so that individual links can display tooltips using different classes and styles, different widths, different positioning or formatting algorithms, etc. More information on this subject is contained in Part Two of the documentation.

Accessibility Features

Most browsers support onfocus activation of the tooltip when applied to links or form elements. This allows keyboard users to activate the tooltip by tabbing among these elements.

If you want content that is to be displayed in the tooltip to also be available for users with JavaScript disabled and for search engines you can use the HTML element to tooltip approach.

Tooltips with Flash

If you are using the Tooltips with Flash, see information about displaying tooltips and other layers over Flash objects at Adobe's Flash Technote.

Proceed to Part Two of the documentation or Back to top

  1. For those unfamiliar with the term, event delegation is described in an article by Andy Hume. See also information about event delegation supporting focus events at Quirksmode. ^