Tooltip Positioning Options

The JavaScript Tooltip provides a full range of options for controlling the position of your tooltips. Tooltips can be positioned relative to the event, or relative to the target, to the left or to the right, above or below, or at window center.

You can apply particular positioning settings to all tooltips or to individual tooltips. Read on for more details and a demonstration. Information for applying these options is provided in the documentation.

Demonstrating Positioning Options

Relative to Event. The tooltip is typically positioned relative to the mouseover (or touch, click, or focus) event, slightly down and to the right with customizable offsets (offX, offY). Property settings allow you to specify Left or Above the event location, or both Left and Above as the position for some or all of your tooltips.

Window Edges. When positioning the tooltip relative to the event, the JavaScript Tooltip 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 target. You can instruct the code otherwise if you prefer, for all tooltips or just for specific links. The following demonstrates. (You may need to resize your browser window to see the effect.)

  • Hover (or tap) at various locations along this long tooltip target to see the effect when jumpLeft is set true, the default. When the large tooltip reaches the edge of the window on the right, it will jump to the other side of the event location.
  • Hover (or tap) this long tooltip target to see the effect when jumpLeft is set false. When the large tooltip reaches the edge of the window on the right, it will stay at the edge.

The jumpAbove setting has a similar effect for vertical positioning of the tooltip. For best results, at least one of these properties should be left at the default value of true, although in any case the code will show as much of the tooltip as possible within the window without covering the target.

Relative to Target. The code provides the option of positioning the tooltip relative to the target rather than the event location. That way the position of the tooltip does not vary according to mouse or touch location, but is consistent each time a particular tooltip is activated. You can position the tooltip:

  • Left of target |
  • Right of target
  • Centered above |
  • Centered below

When positioning the tooltip relative to links or other target elements, position is not adjusted based on window edges. Since under some circumstances the tooltip can appear outside the window, these methods should be used with care.

Window Center. Another option provided by the code allows you to position the tooltip at window center. This is an attractive option for displaying large images that will remain on screen ("sticky") until closed or until another tooltip is activated.

Documentation for Positioning Options

Any of the positioning options described above can be applied to all the tooltips in your document or to individual tooltips. Part Two of the documentation provides instructions.