Elementor Image Hotspot Widget: Add Interactive Tooltips on Any Image

Some things are easier to show than to describe. A product photo where each feature needs labelling, a floor plan where each room has details, an infographic where every region has its own story. A plain image cannot carry that information on its own, and a long block of text next to the image forces visitors to jump back and forth trying to match paragraphs to picture. An Elementor image hotspot solves the problem. You place clickable points directly on the image, and each one reveals a tooltip with text, another image, or a short video.

The Master Addons Image Hotspot widget adds this capability to Elementor without any code. Drop the widget in, pick an image, drag hotspots to the spots you want to annotate, and fill in the tooltip content. The widget takes care of the positioning math, the hover animation, and the responsive tooltip placement.

Below: every setting, how to pin hotspots so they stay in place across screen sizes, how to style the tooltips, and when an image hotspot is the right call versus the Tooltip extension or a plain text block.

Heads up: The Image Hotspot widget is a Pro feature of Master Addons. The plugin itself has a free version with 40+ widgets, but the hotspot widget specifically requires a Pro license. The free plugin from WordPress.org still needs to be installed as the base.

What Is an Image Hotspot in Elementor?

An image hotspot is a small interactive marker placed on top of an image. When visitors hover over it (or tap it on mobile), a tooltip appears with more information. Think of the labels in an anatomy diagram or the product tags on a furniture photo. Every hotspot is positioned in percentage coordinates, so it stays pinned to the right part of the image across screen sizes.

Elementor has no built-in widget for this. You can fake static labels with absolutely-positioned Heading widgets, but you lose the tooltip behavior, the hover animation, and the responsive positioning. The MA Image Hotspot widget from Master Addons handles all of that through the Elementor panel, no CSS required.

Why Use Image Hotspots? (Real Use Cases)

Hotspots work when the image is the primary information and you need to add depth without cluttering it. Common examples:

• Product features. A single product photo with hotspots calling out each feature. Works for physical products (cameras, furniture) and digital ones (dashboards, interfaces).
• Floor plans and room layouts. Real-estate listings, venue pages, event maps. Each room gets a hotspot with square footage, photos, or details.
• Anatomy or technical diagrams. Medical sites, engineering guides, tutorials. Pin a hotspot on each labelled part.
• Interactive infographics. Complex data visualizations where each region has its own story. Hotspots reveal detail on demand without making the graphic noisy.
• Team photo with bio popups. A single group photo with a hotspot on each face. Hover a person, see their role and bio.
• Step-by-step visuals. Screenshots of a software UI where numbered hotspots explain each button or panel.

If the image is decorative and the text is the main event, skip the hotspot and use a regular text block. If the image is doing the explaining, hotspots turn it from a picture into a self-contained explanation.

How to Add an Image Hotspot in Elementor (Step-by-Step)

Full setup below. This assumes Elementor is installed. If not, grab the free version from the WordPress plugin directory first.

Step 1: Install Master Addons and Activate Pro

Install the free Master Addons for Elementor plugin from Plugins → Add New. After activating the free version, install the Pro plugin and enter your license key. Full walkthrough in the installing Master Addons doc.

Step 2: Drag the MA Image Hotspot Widget In

Open the page in Elementor. In the widget panel, search for “Image Hotspot.” You will see “MA Image Hotspot” with the Master Addons Pro badge. Drag it into the column where your image should live. A single full-width column works best because the widget scales with its container.

Step 3: Upload Your Image

In the Content tab, click the image icon and upload your file or pick one from the media library. Set the image size (Full, Large, or Medium depending on the resolution you need) and alignment. The widget renders the image immediately in the preview. All hotspots you add after this point are positioned relative to this image.

Step 4: Add Hotspots (Text or Icon)

Scroll to the Hotspots repeater. Each entry represents one clickable marker. For each one, choose the type:

• Icon hotspot. Pick from the icon library. Small icons (plus signs, info dots, pins) look cleanest. Larger decorative icons feel too loud and pull attention away from the image.
• Text hotspot. Use a single letter or short number (“1,” “A,” “i”). Matches numbered diagrams and technical guides well.

You can also add a link to any hotspot so clicking it jumps to a full page instead of (or in addition to) showing a tooltip. Useful for product-feature pages where the tooltip is a teaser and the click takes visitors to the full feature doc.

Step 5: Configure the Tooltip Content

Each hotspot has its own tooltip content field. You can put plain text, rich text with bold or links, or embedded media (image, video). Keep each tooltip to one or two sentences. If you need more, the widget is probably the wrong shape for your content and you want a dedicated page instead.

Step 6: Position Each Hotspot

Switch to the Position tab inside the hotspot repeater item. Set the horizontal and vertical values as percentages (0–100). The widget uses percentage-based positioning, so hotspots stay pinned to the same spot even when the image shrinks on mobile.

Responsive check: After positioning on desktop, preview on tablet and mobile. The percentage stays the same, but the image aspect ratio can change slightly between breakpoints. If a hotspot drifts off target on mobile, tweak the mobile position using Elementor’s responsive controls instead of changing the desktop value.

Hotspot Content & Style Settings

Each hotspot has three tabs inside the repeater: Content, Style, and Position. Content covers the tooltip text and link. Position handles the coordinates. Style controls how the hotspot marker itself looks.

Inside the Style tab, you get separate default and hover controls for each hotspot:

• Default state: color, background color, opacity. How the hotspot looks before the visitor hovers.
• Hover state: same three controls, but for the hover. Making the hover state visibly different (bigger, brighter, slightly different color) confirms to the visitor that the marker is interactive.
• Pulse animation: a global toggle at the widget level. Gives hotspots a slow pulsing effect so they catch the eye even when the visitor is not looking directly at them. Useful on first page load, annoying if left on every page.

You can style each hotspot individually if you want the “featured” hotspot to stand out, but consistency usually reads better than variety. Start with one style for every hotspot and only break the pattern when there is a real reason for it.

Tooltip Settings (Content, Position, Responsive)

Back at the top-level widget (not inside an individual hotspot), you will see a Tooltips panel. These settings apply globally to every tooltip in the widget, which saves you from configuring the same things six times over.

What lives in the global Tooltips panel:

• Maximum width. Cap how wide each tooltip can grow before it wraps. 200–300px is a sensible range. Wider than that and the tooltip covers too much of the underlying image.
• Position. Pick where the tooltip appears relative to the hotspot: top, bottom, left, or right. “Top” is the safest default because it rarely gets clipped by the image edge, but if your hotspots are near the top of the image, switch to “Bottom.”
• Arrow toggle. Show or hide the little arrow that points from the tooltip down to the hotspot. Keep it on unless your design is very minimalist.
• Disable on device. Hide tooltips on mobile or tablet if they overlap too much on small screens. Combine this with alternate content below the image on mobile if the information is critical.

Image, Hotspot & Tooltip Styling

Switch to the Style tab on the widget. You get three panels: Image, Hotspots, and Tooltips. Each one controls the global appearance of that element type.

Image Panel

Opacity, border, border radius, box shadow, and CSS filters (blur, grayscale, brightness). Dropping the image opacity to about 85% before visitors interact makes the hotspot markers pop. You can bring it back to 100% on hover using CSS filters for a subtle reveal.

Hotspots Panel

Global default and hover styles for every marker: size, color, background, border, box shadow, and typography (if you are using text hotspots). The pulse effect toggle is here too. If individual hotspots need different colors, override them inside each hotspot’s own Style tab.

Tooltips Panel

Background color, text color, typography, border radius, alignment, and padding. Keep the tooltip background contrasting sharply with the image. A dark semi-transparent background (rgba(0,0,0,0.85)) with white text works on almost any photo. For light backgrounds, flip to a solid white tooltip with dark text.

Design Tips That Keep Hotspots Usable

Rules that separate hotspots that help from hotspots that annoy:

• Limit to 5–7 hotspots per image. More than that and the image becomes a puzzle. If you need more, split across multiple images or group related points behind a single hotspot.
• Keep hotspots off the image edges. Edge hotspots push their tooltips off the image entirely. Pull them in by at least 5% from every side.
• Use icons that match your brand icon set. The Master Addons Icon Library has 8 icon families, so you can stay consistent with the rest of your site.
• Write tooltip text like microcopy. Short, concrete, specific. “Shutter speed up to 1/8000s” beats “This camera has an extremely fast shutter for capturing motion.”
• Plan the mobile experience before you ship. Hover does not exist on touch. The widget switches to tap-to-show, so test that the first tap reveals the tooltip and a second tap elsewhere dismisses it.
• Do not rely only on hotspots for critical info. Screen readers may not announce tooltips reliably. Repeat the key points in a regular list below the image for accessibility.

Alternative: The Tooltip Extension (For Any Element)

If what you need is not image-specific tooltips but tooltips on any Elementor element (button, heading, icon), the Master Addons Tooltip extension is a better fit. It is enabled per-element through Elementor’s Advanced tab and does not require the hotspot widget at all.

When to pick which:

• Image Hotspot widget: multiple tooltips pinned to specific points on a single image. Best for product photos, diagrams, and infographics.
• Tooltip extension: one tooltip per element, works on any widget. Best for explaining buttons, labels, or form fields. More on this in the create tooltips in WordPress guide.

For other interactive image widgets from Master Addons, the Image Hover Effects widget adds text overlays on hover, and the FlipBox widget handles two-sided cards with a flip animation.

Free vs Pro: What You Get

The Image Hotspot widget is a Pro-only widget. The base Master Addons plugin is free and gives you 40+ other widgets, but the hotspot widget specifically requires a Pro license. The Tooltip extension is also Pro.

For the full 76+ widget library and Pro pricing, see the Master Addons Pro plans. For a broader addon comparison, our 100 best Elementor addons roundup is a solid reference.

Frequently Asked Questions

Wrapping Up

The Elementor image hotspot widget turns a regular image into an interactive explainer without asking you to write a single line of CSS or JavaScript. Keep it to five or seven markers, write tooltip copy like microcopy, and you have a product photo or floor plan that answers visitor questions before they think to ask them.

For tooltips on non-image elements, use the Tooltip extension instead. For more advanced image interactions, the Image Hover Effects widget pairs well with hotspots on the same page, and the Elementor page background guide covers techniques that make the image itself more engaging.

Related reading: Elementor marketing widgets | Elementor FlipBox widget | Master Addons icon library