Tooltip Positioning Options
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 (
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.
- Hover (or tap) at various locations along this long tooltip target to see the effect when
jumpLeftis 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
jumpLeftis set false. When the large tooltip reaches the edge of the window on the right, it will stay at the edge.
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.