An image tooltip shows a picture when someone hovers an element – a product shot next to a name, a team photo next to a byline, a screenshot next to a feature.
The Global Tooltips extension in The Plus Addons for Elementor can put anything the WordPress editor can produce inside the tooltip, images included. It works on any Elementor widget, core widgets included.
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: Pro. This is not available in the free plugin – with Pro deactivated no tooltip markup is added to the page at all.
- Switch it on: The Plus Addons > Extensions, search Tooltip, turn the toggle on. Extensions, not Widgets.
- Have the image ready in your Media Library.
- If you only need plain text, follow How to Add Text Tooltip in Elementor? instead – it is fewer steps.
Steps
- Select the widget and open Advanced > Tooltip. The section is called exactly Tooltip, and it sits in the Advanced tab of the widget you selected.
- Set the Tooltip switch to Yes.
- On the Content tab, change Content Type to WYSIWYG Editor. The Description textarea is replaced by a Tooltip Content rich-text editor.
- In Tooltip Content, clear the placeholder text and use Add Media to insert your image from the Media Library.
Keep the image small. The tooltip box is 200 px wide by default, and the image is displayed at whatever size you give it – a full-size photo will overflow the layout until you set a width on it or raise Width in Style > Tooltip Options.
What You Will See
On the live page, hovering the widget opens the tooltip with your image inside it. In our test the open tooltip contained an image element pointing at the file we had inserted, sitting above the widget with the usual arrow pointing down at it.
How It Behaves
- Because this is the full WordPress editor, anything it can produce works: an image, an image plus a line of text, a link, a short list.
- If your tooltip contains a link or a button, leave Tooltips Interactive on Enable in Style > Tooltip Options so the pointer can move into the tooltip without it closing.
- The tooltip only exists on the front end. The editor canvas does not preview it.
- The defaults are a dark box, opening above the widget, on hover. Theme, Position and Trigger in Style > Tooltip Options change all three – we confirmed each of them.
Limitations
- Pro only.
- There is no image-size control inside the tooltip. Size the image yourself when you insert it, or set Width on the tooltip.
- Hover is awkward on touch screens; set Trigger to Click for mobile. We did not test touch devices.
- With Content Type set to Text Content the Text Alignment control disappears, so alignment inside a WYSIWYG tooltip has to come from the editor’s own formatting.
Troubleshooting
I cannot find Add Media
Add Media belongs to the Tooltip Content editor, which only appears once Content Type is WYSIWYG Editor. With Text Content selected you get a plain textarea instead.
The tooltip shows the image URL as text
The image was pasted as text rather than inserted. Use Add Media, or switch the editor to its text view and paste a real image tag.
The image is far too big
Set a width on the image when you insert it, or raise Width in Style > Tooltip Options – it goes up to 700 px.
Nothing appears on hover
Check that the extension is on at The Plus Addons > Extensions, that Tooltip is Yes, and that Trigger has not been set to Click.
Not verified
So you know exactly what has and has not been checked:
- Everything in Style Options – padding, background, border, radius and shadow.
- Width, Offset, Distance and the animation durations.
- Video or iframe content inside the tooltip. Only a still image was tested.
- Touch and keyboard behaviour.
