Elementor Image Hotspot Widget with Tooltips (Pro)
Image Hotspot is a Master Addons Pro widget that pins markers on top of an image. A marker can be a plain dot, a short text label, a Font Awesome icon or a small picture, and each one opens a tooltip when a visitor hovers it, or taps it once you switch on Trigger on Click. It suits shop-the-look photos, product callouts, floor plans, campus maps and labelled diagrams. If what you want is a hover hint on a button or a heading, the Tooltip widget (no Master Addons Pro needed) or the Tooltips extension (Pro) is the closer fit.
How to Add an Image Hotspot in Elementor
To add an image hotspot in Elementor, activate Master Addons Pro, edit the page with Elementor and search the widget panel for Image Hotspot. Drag it in, choose your picture under Image, then open Hotspots and click Add Item for every marker. Set each marker’s Type, Tooltip Content and Position, then publish.
Search the panel for “hotspot” and two results come back. The one badged MA is this widget. The padlocked one beside it is Elementor’s own Hotspot, which needs an Elementor Pro licence, so it is worth checking which one you already own before you build.
Drop the widget in, pick your image and set Image Resolution to Full if the picture carries fine detail. Markers sit on the rendered image, so a downscaled source makes every pin look approximate. Open Hotspots, hit Add Item, and repeat once per marker. Each item carries its own Content, Style and Position tabs.
Two things trip people up on the first build. Markers land at the top-left corner until you touch the Position sliders, so three fresh items stack into what looks like one. And the Tooltip Content box is a full editor, which makes it tempting to paste a paragraph in. There is a reason to resist that, covered further down.
Worked examples with product photos, maps and diagrams live in how to add image hotspots in Elementor. Every control is listed in the Image Hotspot widget settings guide.
Image Hotspot at a Glance
What the widget does, read from the Master Addons Pro code.
| Item | Image Hotspot widget |
|---|---|
| Marker types | None, Text, Icon or Image |
| Markers per image | As many as you add to the Hotspots list |
| Positioning | Horizontal and vertical sliders in percent of the image, one position for every screen size, no drag |
| Per-marker settings | Link, tooltip text, tooltip side, default and hover colors, opacity |
| Tooltip content | Plain text (HTML is removed on render) |
| Tooltip side | Top, Bottom, Left or Right |
| Tooltip animation | Shift-Away, Shift-Toward, Fade, Scale, Perspective |
| Trigger | Hover, or click with Trigger on Click |
| Arrow, offset and distance | Yes |
| Pulse effect | On by default, one switch turns it off for the widget |
| Marker link | Followed when tooltips open on hover |
| Style | Marker size, padding, radius, default and hover colors; tooltip padding, radius, colors, arrow color, typography |
| Needs | Elementor and Master Addons Pro |
Build an Interactive Image in Elementor
An interactive image is a photo that answers questions when a visitor points at it. In Elementor you build one with Image Hotspot in three steps.
- Drop Image Hotspot into a container and pick the photo under Image.
- Add one item per spot in Hotspots. Choose Text, Icon or Image as the marker, type a one-line tooltip and set Horizontal and Vertical position in percent.
- Open Tooltips, pick the side and animation, and turn on Trigger on Click if most visitors are on phones.
For a full walkthrough with screenshots, read how to add image hotspots in Elementor.
Four numbered markers on an office photo, with the tooltip for the meeting table open.
Use Image Hotspot as a Simple Image Map
An image map makes parts of a picture clickable. Image Hotspot covers the common case: a marker on each spot with a Link to another page, which works when tooltips open on hover. It does not draw clickable shapes or areas the way an SVG image map plugin such as Image Map Pro does, so a floor plan where every room outline must be clickable needs a dedicated image map plugin.
For pins on a campus map, a store layout or a product diagram, markers are enough and quicker to set up. The gym zone map demo works this way.
Four Marker Types on One Image
The Type control in a marker’s Content tab gives you four shapes, and you can mix all four inside a single image.
None leaves a bare coloured dot. It is the cleanest option for dense diagrams where labels would collide with each other.
Text prints a short string inside the marker. Numbers work well here, because 01, 02 and 03 across a product shot read as a guided tour with no legend to write. Longer strings turn the dot into a pill, which is the look you want for something like “Cologne No. 5”.
Icon takes any Font Awesome icon from the library, so a leaf can stand in for ingredients and a star for a rating.
Image swaps the marker for a picture from your media library. Product thumbnails and avatars read best; anything busy turns to mush at marker size.
Each marker also accepts a Link. That link fires when tooltips open on hover, or on breakpoints where you have switched tooltips off. It does not fire while Trigger on Click is on, because the tap is already taken.
Place Every Marker by Percentage
The Position tab holds two sliders, Horizontal position and Vertical position, both measured in percent of the image. Setting 50 and 24 puts a marker a quarter of the way down the middle. There is no drag-on-canvas placement, so you nudge the numbers and watch the preview.
Percent is what keeps the markers honest on a phone. The base image scales with its container and each marker keeps its relative spot, so a label pinned to a bottle cap is still on the bottle cap at 390px wide, where a pixel offset would have drifted off.
The same tab carries a per-marker Show to, which overrides the global tooltip side for that one marker. That helps when a marker sits near the right edge and its tooltip would run off the image: set that one to Left and leave the rest on Top.
Markers pulse by default. The Disable Pulse Effect switch at the bottom of the Hotspots section turns the animation off for every marker at once, which is usually what a floor plan with fifteen pins needs.
Tooltip Position, Animation and Mobile Behaviour
The Tooltips section drives every tooltip in the widget together: Show Position (top, bottom, left or right), Animation (Shift-Away, Shift-Toward, Fade, Scale or Perspective), an Arrow toggle, plus Offset and Distance for fine nudging.
Tooltips open on hover. Phones have no hover, so switch on Trigger on Click and a tap opens the tooltip. Marker positions are set once in percent and apply to every screen size, with no separate tablet or mobile position. Markers keep their size on a phone, so on a narrow screen they cover more of the photo. Keep the count low or lower the marker Size in Style, Hotspots.
One limitation to plan around. Tooltip Content is a WYSIWYG box, but the widget strips the markup before it renders, so bold, links, images and shortcodes all disappear and the tooltip shows plain text. Keep each one to a single short line. When you need formatted tooltip content, Elementor Pro’s Hotspot widget handles rich text and this widget does not.
Styling the tooltip itself is the full set: alignment, padding, radius, background, text colour, border, arrow colour, typography and box shadow. The base image gets opacity, border, radius, box shadow and CSS filters.
Style Markers for Default and Hover
Marker styling sits in two places, which is simpler than it sounds once you know the split.
The widget’s Style tab covers every marker at once: Text Padding, Border Radius, Typography, a Transition group, and then Default and Hover tabs holding Opacity, Size, Colour, Background Colour, Border Type and Box Shadow. Size is a scale multiplier from 0.5 to 2, so setting Hover to 1.15 gives markers a light lift under the cursor without shifting anything else on the page.
The Style tab inside a single marker overrides that marker’s colour, background and opacity for default and hover. That is how you make one marker red on a wall of purple, to mark a sold-out item or flag the hotspot you want noticed first.
Border Radius at 100 gives you circles and pills. Drop it to 6 and text markers become square tags, which reads better on an architectural drawing than a row of bubbles.
Elementor Pro Hotspot vs Master Addons Image Hotspot
Elementor Pro ships its own Hotspot widget. If you already pay for Elementor Pro, check that one first, because you may not need this one at all.
| Feature | Elementor Pro Hotspot | Master Addons Image Hotspot |
|---|---|---|
| Price | Needs Elementor Pro | Needs Master Addons Pro |
| Marker types | Label text and an icon, with custom size | None, Text, Icon or Image |
| Marker animation | Soft Beat, Expand or Overlay, with sequenced animation | Pulse on or off |
| Tooltip content | Rich text with formatting | Plain text only |
| Tooltip trigger | Hover, Click or None | Hover, or Click with Trigger on Click |
| Tooltip animation | Fade and slide styles with a duration setting | Shift-Away, Shift-Toward, Fade, Scale, Perspective, plus arrow, offset and distance |
| Positioning | Per device positions | Horizontal and vertical percent sliders, one position for every screen, no drag on the canvas |
| Marker link | Link per hotspot | Link per marker, followed when tooltips open on hover |
| Needs Elementor Pro | Yes | No |
Elementor Pro wins on rich tooltip text and marker animations. Master Addons is the pick if you want image markers or already use Master Addons Pro without Elementor Pro. Related: the Tooltip widget, the Tooltips extension (Pro), Image Comparison and Image Hover Effects.
Where an Image Hotspot Earns Its Place
Shop-the-look photography is the obvious one. A single lifestyle shot, an image marker per product, a tooltip naming each item and a Link through to its product page. It works better than a grid of thumbnails because the visitor sees the pieces styled together before they see them priced.
Specs without a spec table is the quieter use. On camera bodies, watches and machinery, numbered markers walk a reader around the object in the order you choose, and nobody has to map row 4 of a table back onto the photo.
Then there are floor plans, campus maps and labelled diagrams. Dots with Disable Pulse Effect on, a one-line tooltip on each, and a Link on each marker pointing at the full page, with tooltips left on hover so the link still fires. Fifteen pins stay readable that way; fifteen pulsing pills do not.
Pairs well with: the Tooltip widget, the Tooltips extension (Pro), Image Hover Effects, Advanced Image and Image Comparison.
Image Hotspot Examples
Fourteen live demos built with the widget, each a different use for an image hotspot.
- Shop the look: numbered markers on a living room, each tooltip naming a piece and its price.
- Restaurant dish: icon markers naming the supplier of each part of the plate.
- Property listing: label markers on a villa for the roof terrace, suite and pool.
- Car listing: icon markers on lights, wheels and parking cameras.
- Fashion lookbook: markers on a bag, a watch and a coat with prices.
- Gym zone map: one marker per training area.
- Watch anatomy: small icon markers on the dial, movement and crown.
- Coworking tour: plain dots on an office floor.
- Phone hardware: markers on the cameras, power button and charging port.
- Headphone features: callouts on a product shot.
- VR headset: feature and warranty callouts.
- Outfit breakdown: jacket, sunglasses and jeans.
- Product promo: markers on a tote bag photo.
- Landing page callouts: markers on a page screenshot.
Frequently Asked Questions For Image Hotspot
What happens on mobile phones where there's no hover?
Turn on Trigger on Click in the Tooltips section so visitors tap a marker to open its tooltip. Markers keep the same percent position on every screen, so preview the page at phone width and lower the marker Size if they crowd the image.
Can I use a custom image instead of an icon for the hotspot marker?
Yes. Set the hotspot Type to Image and pick a picture from the media library. A small, simple image such as a product thumbnail or avatar reads best at marker size.
Can I drag markers into place in the editor?
No. Each marker has Horizontal position and Vertical position sliders in its Position tab, measured in percent of the image. Move the slider and watch the preview. Percent keeps the marker on the same spot when the image resizes.
Can I use Image Hotspot as an image map?
For point links, yes: put a marker on each spot and give it a Link, with tooltips left on hover. It does not draw clickable shapes or areas, so for room outlines on a floor plan use an image map plugin such as Image Map Pro.
Is there a hotspot widget in free Elementor?
No. Elementor’s Hotspot widget is part of Elementor Pro, and Image Hotspot needs Master Addons Pro. Some other addon packs include a hotspot widget in their free versions.
Is the base image itself responsive?
Yes. The image scales with its column, and marker positions are set in percent, so each marker stays on the same part of the image across screen sizes. On phones, turn on Trigger on Click so a tap opens the tooltip.
Is the Image Hotspot widget free?
No. Image Hotspot is part of Master Addons Pro. Without Pro you can use the Tooltip widget, which adds a hover hint to a single element but does not pin markers on an image. Elementor Pro users can also use Elementor’s own Hotspot widget.
Can I turn the pulse animation off?
Yes. Disable Pulse Effect sits at the bottom of the Hotspots section and switches the pulse off for every marker in that widget. There is no per-marker pulse toggle, so use a second Image Hotspot widget if you need both looks on one page.
Why is the formatting in my tooltip disappearing?
The widget removes HTML from Tooltip Content before it renders, so bold text, links, images and shortcodes are dropped and the tooltip shows plain text. Keep each tooltip to one short line. For formatted tooltips, Elementor Pro’s Hotspot widget supports rich text.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
