Tooltip Documentation

This page provides documentation for dyn-web's JavaScript Tooltips. The best starting point when implementing 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 usage. 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. Script Tag

Place a script tag for the external JavaScript file in the head of your document:

<script src="js/dw_tooltip_c.js" type="text/javascript"></script>

2. 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 modify to suit your design:

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

The only style specification that is generally required is width.[1] The code handles position and visibility. Background color, border, and padding are typically included.

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, as Part Two of the documentation describes. If you are using any of the formatting functions or supporting touch devices with a close box, additional styles may be included in the style sheet. These can be seen in examples in the download file. ^

3. Tooltip Targets 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. Tooltip content can either be included as a string, as the above demonstrates, or provided as img, txt, caption or other properties in the .content_vars entry for a given link. Part Two of the documentation provides details. 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 Ajax and HTML elements within the page.

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

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

^

Setting Default Properties

The tooltip code has several features, options, and settings that can be controlled through defaultProps. For example, if you would like your mouseover tooltips to remain visible on mouseout to enable links in their content, you would specify that using the hoverable option as follows:

dw_Tooltip.defaultProps = {
    hoverable: true
}

If you would like your tooltips to be activated onclick, support touch devices, show a close box, and be positioned in the center of the window, you would specify that with the following:

dw_Tooltip.defaultProps = {
    supportTouch: true,
    activateOnClick: true,
    showCloseBox: true,
    positionFn: dw_Tooltip.positionWindowCenter
}

Part Two of the documentation provides more information on setting default properties.

Individual Tooltip Properties

Several of the properties available for default settings are also available for specific tooltips. That is, 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. The escape key can be used to hide the tooltip.

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 on Touch Devices

The tooltip code has been updated to provide full support for touch devices.[2] The code now also includes an onclick activation option so that uniform support can be provided for desktop and touch screen users. This is set up as follows:

dw_Tooltip.defaultProps = {
    supportTouch: true,
    activateOnClick: true
}

Touch devices can also be supported when desktop users activate the tooltip onmouseover, the default. Most of the tooltip examples, such as Images in Tooltips, demonstrate support for touch devices with mouseover activation for desktop users. A demonstration of onclick activation is provided at Tooltips and Touch Devices.

Since tooltips are typically displayed onmouseover of links with URLs for navigation, support for touch devices is turned off by default in the tooltip code.[3]

Known Issues

Hoverable Tooltip Spacing. When using hoverable tooltips, if the links or other target elements are too close together, their tooltips may not work as intended. This issue is easily avoided by providing some spacing between the elements to which hoverable tooltips are attached.

Close Box Styles. If you encounter problems with the appearance of the close box for touch screens, sticky tooltips or onclick activation, see information in Documentation Part Two.

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. You would not need to specify width in the style sheet if you are going to vary the width for each tooltip using one of the formatting functions described in Part Two of the documentation. ^
  2. The tooltip code has been tested successfully on iphone, ipad and Android versions 3 and 4. ^
  3. Touch screen users will navigate when they tap the link and would not be able to view the content of the tooltip. But if the user then taps the back button, the tooltip would be visible upon return to the page. This undesirable behavior is the reason support for touch devices is turned off by default. ^