Tooltip Documentation

Page Topics:

This page provides documentation for dyn-web's 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 contains more advanced information, listing available property settings and discussing how they can be set 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:

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 preferably in an external style sheet.

If you would like to have different links display the tooltip with different styles, you can make use of the klass property. An example in the download file demonstrates. Part two of the documentation describes. ^

Tooltip Links and Content

The default mechanism for indicating to the code that a link or other page element has a tooltip associated with it is to include a showTip class[1] followed by a second class which serves as a locator for the code to look up the content in dw_Tooltip.content_vars. For example, links to display tooltip content can be set up as follows:

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

The code uses that second class name to find the content in the 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>'
}

As you can see, 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 when the value of the content_vars entry for a given link is itself an object literal[2]. Part two of the documentation provides more information about this as does the images and text example. 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. An id or value in a query string provides another means of obtaining content for the tooltip, using ajax for example.

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>

See the download file for other examples. ^

Initialize the Tooltip Code and Event Delegation

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

addLoadEvent( dw_Tooltip.init );
addLoadEvent( dw_Tooltip.initHandlers );

An addLoadEvent function is used to set up the code in an attempt to avoid conflicts with any other code that needs to be initialized onload, as discussed in the Competing Onloads tutorial.

Event delegation[3] 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, display a close box, cinch up according to the width of your images, and be positioned in the center of the window you would specify that with the following default property settings:

dw_Tooltip.defaultProps = {
    sticky: true,
    showCloseBox: true,
    closeBoxImage: 'images/close.gif',
    wrapFn: dw_Tooltip.wrapImageToWidth,
    positionFn: dw_Tooltip.positionWindowCenter
}

Part Two of the documentation includes a complete list of the properties provided and describes their purpose. The download file contains numerous examples that demonstrate use of special properties of the code 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. The download file contains numerous examples that demonstrate.

Accessibility Features

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

If you wish the content that is to be displayed in the tooltip to also be available for users who may not have JavaScript enabled 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 Macromedia's Flash Technote on making Flash transparent.

Proceed to Part Two of the documentation or Back to top

  1. There are other ways to set up the code so that the showTip class is not required. Forthcoming documentation will describe. ^
  2. We have prepared a brief tutorial on Object Literals for those unfamiliar with the syntax.^
  3. 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. ^