---
title: "How to Add an Image Tooltip in Elementor?"
url: https://theplusaddons.com/docs/image-tooltip-in-elementor/
date: 2024-02-06
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Add-an-Image-Tooltip-in-Elementor_-1024x536.jpg
word_count: 685
---

# How to Add an Image Tooltip in Elementor?

## 

- The Plus Addons for Elementor Pro includes the Global Tooltips extension, and it works on any Elementor widget, including core widgets.
- Tooltip Content switches to a WYSIWYG Editor when Content Type is set to WYSIWYG Editor, so Add Media inserts an image from the Media Library instead of plain text.
- The tooltip box is 200 px wide by default, and Width in Style > Tooltip Options goes up to 700 px for larger content.
- Tooltips Interactive stays enabled for links or buttons inside the tooltip, and Trigger changes to Click for mobile because hover is awkward on touch screens.

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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/global-tooltips/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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?](https://theplusaddons.com/docs/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.

![The Content Type dropdown, set to Text Content.](https://theplusaddons.com/wp-content/uploads/2026/09/tooltip-content-type.webp)

![The Tooltip Content editor, shown with Content Type set to WYSIWYG Editor.](https://theplusaddons.com/wp-content/uploads/2026/09/tooltip-wysiwyg-content.webp)

> *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.

![An image inside the tooltip, shown on hover on the front end.](https://theplusaddons.com/wp-content/uploads/2026/09/tooltip-result-image.webp)

## 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.

## Related Docs

- [Global Tooltips: Settings Overview](https://theplusaddons.com/docs/global-tooltips-settings-overview/)- [How to Add Text Tooltip in Elementor?](https://theplusaddons.com/docs/text-tooltip-in-elementor/)- [How to Add a YouTube Video Tooltip in Elementor?](https://theplusaddons.com/docs/youtube-video-tooltip-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding an image tooltip in Elementor?**
A: The setup depends on the Pro edition of The Plus Addons for Elementor, because the tooltip markup is not added at all when Pro is deactivated. The extension also has to be turned on under The Plus Addons > Extensions, and the image should already be in your Media Library. That matters because the tooltip content is built from the WordPress editor, so having the asset ready avoids extra cleanup later.

**Q: Can I use an image tooltip on any Elementor widget?**
A: The Global Tooltips extension works on any Elementor widget, including core widgets. That makes it useful for practical cases like a product shot beside a name, a team photo beside a byline, or a screenshot beside a feature. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this inside the Elementor editor without needing code.

**Q: Why does the tooltip show the image URL as text instead of the image?**
A: That usually means the image was pasted as text instead of inserted as media. The tooltip content editor needs a real image insertion through Add Media, or a proper image tag if you switch the editor to its text view. This matters because WYSIWYG content can hold rich elements, but plain pasted text will only display the URL string.

**Q: How do I stop an image tooltip from being too big?**
A: Image size has to be controlled at insertion time or by widening the tooltip itself. The default tooltip box is 200 px wide, and there is no separate image-size control inside it. If the image is full-size, it can overflow until you set a width on the image or raise Width in Style > Tooltip Options, which goes up to 700 px.

**Q: Why does nothing appear when I hover over the widget?**
A: The most common causes are that the extension is off, Tooltip is not set to Yes, or Trigger has been changed to Click. Hover tooltips also only exist on the front end, so you will not see them on the editor canvas. That combination explains most missing-tooltip reports when building with The Plus Addons for Elementor.

**Q: What is the best trigger for image tooltips on mobile?**
A: Click is safer on touch screens because hover is awkward there. The page notes that hover behavior was not tested on touch devices, so relying on hover alone can make mobile interactions unreliable. If your tooltip includes a link or button, Tooltips Interactive should stay enabled so pointer movement into the tooltip does not close it immediately.