Dynamic tooltips
Click here to scroll a little lower and see how the tooltips behave. We are using the dynamic plugin to reposition our tooltips so that they are always visible in the viewport.
If there is no room on the top edge then the tooltip is shown on the bottom edge. The same happens on every edge of the tooltip: top, bottom, left and right. The opposite edge is always used.
Features
- Can be used with any effect
- You can use a custom CSS class name for any repositioned edge. This allows you to style the tooltip differently for each edge.
- You can change the effect and any other configuration variable dynamically whenever repositioning occurs.
- The tooltip's offset configuration variable is inverted. Higher means lower and further right means further left.
- Small file size: only about 2Kb of minified code. Incomparable.
Usage
Here is the JavaScript setup for the example above:
Read the full documentation for this example.
Configuration
Here is a full list of available configuration options for this plugin:
property | default | description |
---|---|---|
classNames | 'top right bottom left' |
The CSS class names assigned for the tooltip when repositioning occurs. The names are given as a single string where names for different edges are separated with spaces. Note that you must follow the default pattern for designating different edges if you change the class names. |
top |
|
An object with alternate configuration options that will override the default settings when the tooltip is repositioned on the top edge. For example: {offset: [40, -30], effect: 'toggle', opacity: 0.9}. |
right |
|
Alternate configuration options for the right edge. |
bottom |
|
Alternate configuration options for the bottom edge. |
left |
|
Alternate configuration options for the left edge. |