Tooltip Positioning Options

The dyn-web JavaScript Tooltip code 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 individually. Read on for more details and demonstration. Information for applying these options is provided in the documentation.

Demonstration

Relative to Event. The tooltip is typically positioned relative to the mouseover (or touch, click or focus) event, slightly down and to the right using 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 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 target. You can instruct the code otherwise if you prefer, for all tooltips or just for specific links. The following demonstrates.

• 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:

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 until closed ("sticky") or until another tool tip is activated.

Applying Positioning Options

Any of the positioning options described above can be applied to all the tooltips in your document or on individual basis. Part Two of the documentation provides instructions. An example in the download file for licensed users demonstrates.

More Information

Find out more about the tooltips in the features list. The documentation includes basic instructions plus information about more advanced features of the code. The download file contains several examples. Additional examples are provided with a license purchase.

Back to top