Tooltip Element
The Tooltip Element adds a small text bubble to a word or phrase. When the visitor moves the mouse over the text, or clicks it, the bubble appears next to it with a short explanation, and it disappears again when the visitor moves on.
Tooltips are useful for brief definitions, abbreviations, units or hints that would interrupt the flow of a sentence. The element is inline: it sits inside running text, for example in a Text Block, rather than as a separate block on the page.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Tooltip Element
Insert the Tooltip Element where the text should appear, for example with the element generator in the editor of a Text Block. Enter the text of the bubble in Tooltip Title and the visible text that triggers it in Triggering Content.
On the Design tab choose the Tooltip Position: above, below, left or right of the text. Set the Tooltip Trigger Action to Hover to show the bubble when the mouse is over the text, or to Click to open it with a click or tap.
The bubble is a small dark box with light text; the element itself has no color or typography options. Use CSS Class or CSS ID if you need to style a single tooltip, and Conditional Rendering on the Extras tab to show it only under certain conditions.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Tooltip Title | Insert the text that displays in the tooltip. |
| Triggering Content | Insert the text that will activate the tooltip when hovered or clicked. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Tooltip Position | Choose the display position. |
| Tooltip Trigger Action | Choose action to trigger the tooltip. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Keep tooltip texts to one short sentence. Longer explanations belong in the text itself or in a Popover Element.
- Hover does not exist on touch screens. Choose Click when many visitors use phones or tablets.
- The trigger text cannot be reached with the keyboard, so never put information that visitors must have only in a tooltip.
- Pick a Tooltip Position with enough room. Near the edge of the screen, a bubble on the left or right can be cut off.
- The trigger text looks like normal text apart from a pointer cursor. Make it recognizable, for example by making it bold or underlined in the Text Block around it.