Demonstrating Tooltip Features

Basic Tooltip

The code begins from an easy-to-set-up tooltip to display a little text about the destination when a link is hovered over. It proceeds from there to offer many more possibilities and lots of flexibility while maintaining relative ease of use.

The code has a centralized location for specification of content and options, separate from your markup. The syntax is tidy and provides easy customization.

An example tooltip link:

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

An example of how to set up the content for that link:

dw_Tooltip.content_vars = {
    link1: 'Tooltip content for link 1'
}

Easy examples in download file demonstrate how to proceed from this point, adding images, images and text, and more.

Tooltips with Images

It is quite simple to include images in the tooltip. Hover over the dash-underlined text below to see the capabilities of the code demonstrated.

• The tooltip width can be adjusted according to the width of images.
• Display image over text
• Display text over image
• Display image and text side by side
• Include a caption with the image and text
• Display in the center of the window as a sticky tooltip

The code includes several functions providing various formatting and layout options, and also supports custom functions should you have particular needs.

Instructions

When you want to display images in the tooltip you can pass the image tag in a string as demonstrated in the documentation. When you want to include both images and text you will generally find it much easier to use the special formatting functions provided with the code. For example, you could set up the code to display images over text using the formatting function wrapImageOverText as follows:

dw_Tooltip.defaultProps = {
    wrapFn: dw_Tooltip.wrapImageOverText
}

dw_Tooltip.content_vars = {
    // for link with class="showTip L1":
    L1: {
        img: 'images/dw-btn.gif', // image path and filename
        txt: 'dyn-web button',  // text for tooltip
        w: 100 // width of tooltip
    },
    // for link with class="showTip L2":
    L2: {
        img: 'images/dot-com-btn.gif',
        txt: 'dyn-web.com button',
        w: 184
    }
}

An example in the download file demonstrates. In addition to wrapImageOverText, other formatting functions for use with images are also provided in the code, as demonstrated in the list above. See Part Two of the documentation for more information about these functions and their use.

The code is designed to support large images in the tooltip. The code will continue to adjust the position while the image is loading. You can specify the width of the image or the tooltip for each link. Positioning options provided give you considerable control over how and where the tooltip will display, making best use of the available space within the window.

Tooltip Positioning Options

The tooltip is typically positioned relative to the mouseover event or near the link receiving focus, slightly down and to the right, but there are other options.

You can instruct your tooltips to appear to the left or above the mouseover event, or both. You can apply that setting to all tooltips or to just particular ones.

The code offers options for control of behavior when the tooltip reaches the right or bottom edge of the window. By default it will jump to the other side of the link or other actuator. You can instruct the code otherwise if you prefer, for all tooltips or just for specific links. The properties are jumpLeft and jumpAbove. The following demonstrates.

If you resize your browser window (perhaps scroll too) and hover over the above table cells with tooltips attached you will observe that at the default settings, (down and to the right, with jumpLeft and jumpAbove both true) the code attempts to make the best use of the available space to display the largest possible portion of the tooltip.

An example in the download file for licensed users demonstrates the positioning options.

The tooltip code is designed to support alternate and custom positioning algorithms. One possible option positions the tooltip window center. Other options are also possible.

Page Elements' Content Displayed in Tooltips

This example demonstrates and describes how you can use the tooltip code to display HTML elements that exist in your page as tooltips. Generally the content of tooltips is not available for those with JavaScript disabled or incapable browsers or for search engines, 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. To demonstrate: a link to documentation displaying a hoverable tooltip, and a span element with a sticky tooltip, both of these viewable in the source code, near the bottom in this example.

Instructions

Suppose you have an element with an ID of menu1 that you wish to display in a tooltip when hovering over a particular link. You would set up that link 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 code where to look for tooltip content. The following tells the code 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();

A basic example in the download file demonstrates these easy steps.

The ability to display page elements in tooltips can be combined with other features of the code, such as the klass property described in Part Two of the documentation, the hoverable and sticky properties, as well as the capability to use alternate positioning functions. An example document demonstrating is available for licensed users.

Ajax Tooltips

The Ajax component of the tooltip code has recently been updated with added flexibility. It now allows you to:

• Display the contents of external files in the tooltip.
• Pass one or more data values, to be used in a query for example.
• Return discrete data items from the server for use with one of the formatting functions, for example image, text, caption etc.
• Combine ajax with other features of the code, such as alternate classes, hoverable, etc.
• Include some "static" tooltips in the page while others are retrieved using Ajax.

Instructions

When using ajax to retrieve content for the tooltips you set up the defaultProps as follows:

dw_Tooltip.defaultProps = {
    content_source: 'ajax'
}

Ajax tooltips make use of the showTip class and content_vars just as other implementations of the code. The documentation provides information on how to specify the parameters and URL for your ajax requests. See examples in the ajax tooltips download file.