Tooltip Positioning Options
This example of dyn-web's DHTML Tooltips demonstrates and describes how the tooltip can be displayed using varying positioning options.
As is typical with most tooltip code, the default positioning is offset from the mouseover event, a bit below and to the right. This code also supports onfocus activation of the tooltip, in which case it appears offset from the link receiving focus.
Alternate Positioning Algorithms
The code is designed to support alternate positioning algorithms. The default positioning algorithm, as mentioned above, is relative to the mouseover event or near the link receiving focus. Another positioning algorithm presently offered: window center. We will likely provide additional options in the coming months.
Position Left and/or Above
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.
With a setting of Left, the tooltip will display left of the link, or at the left edge of the window if there is insufficient space. Similarly for the setting of Above, the tooltip will display above the link or at the top of the window if there is insufficient space.
Note: If you instruct the tooltip to display Left and/or Above that's where the code is going to put it, even if there's more room on the right/below.
Behavior at Window Edges
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.
A table cell with a tooltip for our demo. Hover and move the mouse toward the right end to observe the setting of jumpLeft: true, the default. |
A table cell with a tooltip for our demo. Hover and move the mouse toward the right end to observe the setting of jumpLeft: false. |
A table cell with a tooltip for our demo. Hover and move the mouse vertically to observe the setting of jumpAbove: true, the default. |
A table cell with a tooltip for our demo. Hover and move the mouse vertically to observe the setting of jumpAbove: false. |
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.
Unless you are using a sticky tooltip or some other setting that does not deactivate the tooltip onmouseout the tooltip must be positioned so that it does not cover the location of the mouseover event. Otherwise there will be a flicker as mouseover and mouseout events are repeatedly triggered. The positioning algorithm calculates the best position in order to display as much of the tooltip as possible within the available space. That is, even if you specify jumpLeft: true if there's more room on the right, it will display on the right. When you specify jumpAbove: true if there's more room below the link it will display below.
Instructions
The documentation contains general instructions for implementing the code, such as the script tags to be included, where and how to specify styles for the tooltip, etc. Part two provides a complete list of properties and includes instructions for specifying them differently for individual tooltips.
More Information
See Documentation for basic instructions as well as more detailed information about advanced features of the code. The download file contains numerous examples to simplify the process of implementation for you. See the list of examples in the right column to see other features demonstrated.
See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.