A tooltip is a small popup that opens when a visitor hovers an element, so you can add a hint, a price note or a product preview without taking up room on the page.
The Global Tooltips extension in The Plus Addons for Elementor adds a Tooltip section to the Advanced tab of Elementor widgets. It works on any Elementor widget, including the core ones – we checked it on a plain Heading widget.
Requirement – This extension is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: the whole extension is Pro. With only the free plugin active nothing is injected into the page and no tooltip appears.
- Switch it on: go to The Plus Addons > Extensions, search for Tooltip and turn the toggle on. It is on the Extensions tab, not the Widgets tab – searching the Widgets tab for Tooltip returns nothing.
- Where to find it afterwards: select any widget, then open Advanced > Tooltip.
- Nothing else is needed: no fixture content, no extra plugin, no custom post type.
How to Turn On a Tooltip
- Select the widget you want the tooltip on.
- Open Advanced > Tooltip.
- Turn the Tooltip switch to Yes. Everything else in the section stays hidden until you do.
The Content Tab
This is where the tooltip’s text or content goes.
| Setting | What it does | Default |
|---|---|---|
| Content Type | Chooses the editor. Text Content gives you a plain textarea; WYSIWYG Editor gives you the full WordPress editor, so you can put images, links and formatting inside the tooltip. | Text Content |
| Description | The tooltip text. Shown only when Content Type is Text Content. | Placeholder text |
| Tooltip Content | The rich-text tooltip body. Shown only when Content Type is WYSIWYG Editor. | Placeholder text |
| Text Alignment | Aligns the text inside the tooltip box. Text Content only. | Center |
| Typography | Font settings for the tooltip text. | Theme default |
| Text Color | Colour of the tooltip text. | Not set |
The Style Tab
The Style tab holds two popovers: Tooltip Options, which controls how the tooltip behaves and where it sits, and Style Options, which controls how the box looks.
Tooltip Options
| Setting | What it does | Default |
|---|---|---|
| Tooltips Interactive | Lets the visitor move the pointer into the tooltip, which you need if the tooltip contains a link or a button. | Enable |
| Position | Where the tooltip opens: Left, Right, Top, Top Start, Top End or Bottom. | Top |
| Theme | The built-in colour scheme: Dark, Light or Translucent. | Dark |
| Width | Tooltip width, 50-700 px or 0-100 em. | 200 px |
| Offset | Shifts the tooltip sideways from its anchor. | 0 |
| Distance | Moves the tooltip further from the widget. | 0 |
| Arrows | The little pointer on the tooltip: None, Default or Round. | Default |
| Arrow Color | Colour of that pointer. | Not set |
| Trigger | What opens the tooltip: Hover or Click. | Hover |
| Animation | Shift-Away, Shift-Toward, Fade, Scale or Perspective. | Shift-Toward |
| Duration In | Opening animation length, in milliseconds. | 250 |
| Duration Out | Closing animation length, in milliseconds. | 200 |
Tooltip Options and Style Options are popovers. Click the small pencil icon next to the label to open one – the settings inside only take effect once you have opened the popover and changed something.
Style Options
The second popover holds the tooltip box’s own styling: Padding, Background Type with its colour and gradient fields, Border Type, Border Width, Border Color, Border Radius and a box shadow. These were read from the control list and are not described further here, because we did not apply them – see Not verified below.
How It Behaves
- The tooltip is drawn by a small popup library and is added to the page around your widget. It only exists on the front end.
- With the defaults, hovering the widget opens a dark box above it. We measured the popup at 455 px from the top of the viewport against the widget’s 506 px – so, above.
- Setting Position to Bottom moved the same popup to 528 px, below the widget.
- Setting Theme to Light changed the box background from dark grey to white.
- Setting Trigger to Click stopped hover opening it entirely: hovering opened nothing, clicking opened the tooltip.
- The Tooltip section appears on every Elementor widget, not just The Plus Addons ones.
Limitations
- Pro only. There is no free fallback and no upgrade placeholder – in the free plugin the tooltip markup is simply not added.
- Position offers Top, Top Start, Top End, Bottom, Left and Right. There is no Bottom Start or Bottom End.
- The tooltip is an on-hover feature by default, so on touch screens visitors will need Trigger set to Click. We did not test touch devices.
- Some The Plus Addons widgets – Style Lists and Image Cascading among them – have their own Tooltip section inside the widget’s panel for tooltips on individual items. Those are separate from this extension, even though the option names are the same.
Troubleshooting
The Tooltip section is not in the Advanced tab
The extension is off. Go to The Plus Addons > Extensions, search Tooltip and turn it on, then reload the editor. Searching the Widgets tab will not find it – it is not a widget.
Nothing happens when I hover on the live page
Check that Tooltip is set to Yes and that Trigger is still Hover. If you set it to Click, hovering does nothing by design.
The tooltip opens but my styling is ignored
Open the Tooltip Options or Style Options popover and change a value there. Elementor only saves a popover’s settings once it has been opened.
I cannot click the link inside my tooltip
Turn Tooltips Interactive to Enable so the pointer can move into the tooltip without closing it.
Not verified
So you know exactly what has and has not been checked:
- Style Options – padding, background, border, radius and shadow were read from the control list but never applied, so nothing here describes what they look like.
- Width, Offset, Distance, Duration In, Duration Out, Arrow Color, Tooltips Interactive and the Translucent theme – defaults and ranges are listed, but the effect was not observed.
- Touch devices and keyboard access.
- Whether the section is also added to Elementor containers, as opposed to widgets.
Video Tutorial
