Atomic Element · Pro
Pin markers to a photo, floor plan or screenshot. Each point opens a tooltip or a lightbox, and a guided tour walks visitors through them. No Elementor Pro needed.
The short answer
The Image Hotspot is an Elementor image hotspot element from Animation Addons for Elementor, built as a native Elementor 4 Atomic Element. It places interactive markers over an image; each opens a tooltip, a lightbox or a link. Markers and content boxes are real atomic children, and a guided tour can open every point in turn.
Many "Elementor V4 compatible" addons are classic v3 widgets. The Image Hotspot is a native Atomic Element, styled with Classes and Variables.
| Plan | Pro Animation Addons Pro |
|---|---|
| Element type | Native Elementor 4 Atomic Element (composite) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Child elements | Image, Hotspot Point, Hotspot Marker, Hotspot Content, Hotspot Lightbox |
| Per-point action | Tooltip, Lightbox or Link |
| Trigger | Hover, Click or None (tooltips always visible) |
| Marker animations | 6: Beat, Pulse, Ripple, Ring, Glow, Bounce (or None), globally or per marker |
| Guided tour | Enable Tour, Delay per Hotspot (ms), Pause on Hover/Interaction, Loop, Auto-open Tooltips |
| Positioning | Horizontal (%) and Vertical (%), or drag markers on the canvas |
| Limits | Link points navigate by script, not a crawlable <a> link, so Add Nofollow has no effect |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Every demo is built with the Image Hotspot, part of Animation Addons Pro, plus native Elementor 4 elements. Extensions they add are named on each card.
A large product photo with four small markers; hovering one shows a feature name and one line of detail.
A dark dashboard screenshot where each numbered tooltip opens in turn, on its own, then loops.
hotspot-number class in each Marker.A floor plan with a marker per room; clicking opens a lightbox with a room photo, size and note.
An illustrated site map; clicking an area opens a closer image with its own markers for stages and food stalls.
A labelled diagram where every tooltip is visible at once, like printed callouts.
An overhead photo of a full table; each glowing marker takes the visitor to that dish on the menu.
Needs Pro: every demo, because the Image Hotspot is a Pro element; Demos 1 and 4 also use Pro extensions.
Features
Every option below is a real control in the Image Hotspot panel or part of how the element renders. Nothing here needs custom code.
Set each point's On Click/Hover to Tooltip, Lightbox (a centred overlay with a backdrop) or Link (same or new tab).
The parent Trigger decides how tooltips open; None keeps them all visible.
Enable Tour opens each point in turn at your Delay per Hotspot (ms), pauses on hover or focus, and with Pause on Hover/Interaction stops once the visitor clicks.
Hotspot Content is an open container: headings, images, buttons, even another Image Hotspot for drill-down maps.
Beat, Pulse, Ripple, Ring, Glow or Bounce for every marker with one Speed (s), or override a single marker with its own Animation.
The Hotspot Marker starts empty. Drop in an SVG, an Image or a Paragraph. Give a Paragraph the hotspot-number class and markers number themselves in order.
Drag a marker on the canvas or type Horizontal (%) and Vertical (%).
Built on the atomic base
Why it mattersOne Class recolours every marker, and a lightbox can hold a full product card.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Get Animation Addons ProInstall Animation Addons for Elementor and Animation Addons Pro, then open a page with the Atomic Editor on.
Drag Image Hotspot onto the canvas. It drops in with a sample image and two points.
Select the Image child and choose your picture.
In Hotspots, add or remove points, then drag each marker into place.
For each point, pick Tooltip, Lightbox or Link and edit its Hotspot Content; set Trigger, Marker Animation and, if you want, Guided Tour.
Style markers and boxes with Classes, test on a phone, and publish.
Honest comparison
Elementor 4 has no atomic hotspot. Elementor Pro's classic Hotspot widget covers the basics well (label, icon and link per point, percentage positioning). Animation Addons wins on structure and guided motion.
| Feature | Elementor Pro Hotspot (classic) | Animation Addons Image Hotspot |
|---|---|---|
| Element type | Classic v3 widget | Native Elementor 4 Atomic Element |
| Needs Elementor Pro | Yes | No (needs Animation Addons Pro) |
| Tooltip trigger | Hover or click | Hover, click, or always visible |
| Rich content per point | Opens an Elementor Pro Popup through its link | Built-in lightbox holding any elements, including another hotspot image |
| Automatic motion | Sequenced entrance animation | Guided tour that opens each point in turn, plus 6 marker animations |
| Styled with Classes and Variables | No | Yes |
Compared with Elementor 4.3.3 (September 2026).
Who it's for
The people who get the most out of it, and what they use it for.
Explaining features on one image.
Annotating floor plans.
Building clickable maps.
FAQ
With Animation Addons Pro active, drag the Image Hotspot onto the page and choose an image. Add points in the Hotspots section, then drag each marker into place or type its Horizontal and Vertical percentage. Each Animation Addons Image Hotspot point can open a tooltip, a lightbox or a link, and it works on Elementor Free.
Yes. Set a point's On Click/Hover option to Lightbox in the Animation Addons Image Hotspot. Its Hotspot Content opens in a centred overlay with a dark backdrop, and visitors close it with Escape or a click on the backdrop. The lightbox can hold images, text, buttons or another hotspot image for drill-down maps.
Not on their own. In the Animation Addons Image Hotspot, Link points navigate with JavaScript rather than a real <a> tag, so search engines don't follow them and Add Nofollow has no effect. For shop-the-look pages, list the products as normal links beside the image and use the hotspots for the visual. Tooltip and lightbox text is in the page HTML.
The Animation Addons Image Hotspot places every point as a percentage of the image, so markers stay on the same spot at any width. Touch screens have no real hover, so set Trigger to Click for phone-heavy pages, or use None to keep tooltips open. Check that tooltips near the edge fit, and adjust each Hotspot Content box per breakpoint.
Every point in the Animation Addons Image Hotspot is focusable and opens with Enter or Space. Tooltips carry a tooltip role and lightboxes a dialog role, Escape closes a lightbox, and the guided tour pauses when a point gets keyboard focus. Looping marker animations stop for visitors who prefer reduced motion.
The Animation Addons Image Hotspot loads one small script and stylesheet, only on pages that use it. Marker animations are CSS, with no GSAP or other animation library. Tooltip and lightbox content is part of the page HTML, so nothing extra is fetched when a visitor opens a point.
No. The Animation Addons Image Hotspot needs Animation Addons for Elementor plus Animation Addons Pro, not Elementor Pro. It runs on Elementor Free with the Atomic Editor turned on. Need something free? The Image Compare element adds interaction to a pair of images at no cost.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Image Hotspot on the same page or template.
Tooltips, lightboxes and a guided tour, built from real Elementor 4 atomic elements. Need something free? Image Compare is in the free plugin.