Tooltip
The Tooltip module attaches a styled tooltip to a trigger you design: a piece of text, an icon, or an image. It keeps small details one hover away without cluttering the page.
How to add the Tooltip module
- Add a section and row, then add the Tooltip module.
- Pick the trigger type and enter the trigger text, icon, or image.
- Write the tooltip content and choose where the tip should appear.
Content
Trigger
- Trigger: Text, Icon, or Image.
- Trigger Text, Trigger Icon, or Trigger Image (with Image Alt Text), depending on the type.
- Trigger Alignment: Left, Center, or Right.
Tooltip
- Tooltip Content: the text shown inside the tip.
- Placement: twelve positions around the trigger (Top, Right, Bottom, Left, each with Start and End variants).
- Open On: Hover or Click.
- Animation: Fade or Scale.
- Show Arrow: toggle the small pointer between tip and trigger.
- Allow Hovering The Tooltip: keeps the tip open while the visitor moves into it, so links inside stay clickable.
- Open Delay and Close Delay.
Design
- Max Width and Distance From Trigger.
- Tooltip Background, Tooltip Text Color, and Tooltip Corner Radius.
- Icon Color and Icon Size for icon triggers, Image Width for image triggers.
Tip
The module is keyboard accessible out of the box. Tabbing to the trigger opens the tip and Escape closes it, so use it freely for definitions, pricing notes, and small clarifications.