From jQuery JavaScript Library

« Back to the jQuery Tooltip Plugin page

Contents 1 Depends on 2 API Documentation 3 Guidelines 3.1 Delay and tracking 3.2 Content 3.3 Position 3.4 Multiple setups 3.5 PNG backgrounds 4 Demos 4.1 A loose mix of different options

Depends on

• jquery.dimensions.js

API Documentation

Guidelines

Replacing standard tooltips is easy: Just include the script on the page, add a stylesheet, select the elements to tooltip and call the tooltip plugin.

Delay and tracking

Default options mimic the standard behaviour: The tooltip appears after a short delay and stays where it was activated. The delay option lets you remove that (delay: 0) or change the length. Set track: true to let the tooltip follow the mouse while hovering the tooltipped element.

Content

The content of a tooltip is by default the title of the element, with the href or src attribute below it, if present. Set showURL: false to hide the href/src attribute. If the tooltip contains more then a few words, the showBody option can be used to format the tooltip while still degrading nicely. To display any customized content in the tooltip, provide the bodyHandler callback. Its return value will be inserted into the tooltip (and the title will be ignored!).

That is, showBody splits the title on whatever string showBody is set to. So if showBody: " - ", then if the title includes the sequence space-hyphen-space, then everything before it is in the H3 and everything after it is in the body.

Position

Usually the tooltip position is 15 pixel to the lower left (15 on both x and y axis) of the mouse. Set top and left options to override that.

When the tooltip overlaps the right or bottom viewport border, it is repositioned to the left and/or top. When that happens, the classes "viewport-right" and "viewport-bottom" are added to the tooltip element to eg. switch to a different background-image (via stylesheets).

Note that if you set a custom left or top option, this may adversely affect positioning when near a viewport edge. In fact, there appears to be no way to set a custom position when the tooltip is displayed in the .viewpoint-right variant!

Multiple setups

To display multiple tooltips on the same page with different appearances, use the extraClass option.

PNG backgrounds

If PNG background-images are used with transparency, set fixPNG: true to enable an IE specific fix.

Demos

A loose mix of different options

This demo is just a loose mix of different settings. A few default tooltips at the top with a mix of the differnt option following.