How to set up and style the Tooltip extension in Elementor.
Tooltip adds a text tooltip to any widget, container, section or column. It opens on hover, on keyboard focus and on tap, stays inside the screen and is announced to screen readers. Use it for short hints, definitions and notes that should not take up space on the page.
Part of: Bright Addons Pro.
These options are in the Advanced tab of the element.
| Option | What it does |
|---|---|
| Tooltip | Switches the tooltip on for this element. |
| Text | The tooltip text. It is shown as plain text and can come from a dynamic tag. |
| Position | Above, Below, Left or Right of the element. |
| Arrow | Shows a small arrow that points at the element. It is on by default. |
| Distance (px) | The gap between the element and the tooltip, from 0 to 60. The default is 10. |
| Widest (px) | The largest width of the tooltip, from 80 to 600. The default is 240. |
| Background Color | The color of the tooltip box and the arrow. |
| Text Color | The color of the tooltip text. |
| Text Size (px) | The text size, from 10 to 30. |
| Border Radius (px) | Rounds the corners of the tooltip, from 0 to 40. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.
Yes. A tap on the element opens it, a second tap closes it, and a tap anywhere else closes it too.
No. The text is always shown as plain text. Line breaks are kept.
The tooltip flips to the opposite side when there is no room and is kept inside the screen width.
The tooltip has the tooltip role, is linked to the element as its description and opens on keyboard focus.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide