Picture a single product photo where five different features each deserve a label. Or a floor plan where every room should open its own note. Or a team photo where each face links to a bio.
You could stack captions under the image and hope people connect them, or you could let the image explain itself. That is what an image hotspot does. It drops interactive pins onto the picture, and when a visitor hovers or taps one, a tooltip appears with the detail that belongs to that exact spot.
Elementor’s free plugin does not include a hotspot widget, so this is one you add with The Plus Addons for Elementor. Below is how to build an interactive image, no code, which pin and tooltip settings actually matter, and how to keep the whole thing working on mobile.
What an image hotspot is
An image hotspot is a marker placed on top of an image at a specific point. On hover or tap it reveals a tooltip that can hold text, an icon, an image, or a link.
It turns one flat picture into a small interactive map, which keeps people on the image longer and lets them pull up detail without loading a new page.
It fits anywhere a single image carries several points worth explaining:
- Product feature callouts, labeling each part of a device or piece of hardware.
- Floor plans and real estate, tagging rooms or amenities on a layout.
- Maps and locations, pinning offices, stores, or points of interest.
- Diagrams and how-tos, annotating a process or an anatomy illustration.
- Team and about pages, linking each face to a name and role.
How to add image hotspots with The Plus Addons for Elementor
The Hotspot widget ships with The Plus Addons for Elementor. Once the plugin is active, the whole build is visual. Note that the Hotspot widget is a Pro feature, so you will need The Plus Addons for Elementor Pro enabled.
- Edit your page with Elementor and open the widget panel.
- Search for Hotspot, find the one from The Plus Addons, and drag it onto your section.
- Upload the image you want to annotate, for example a product shot, a map, or a floor plan.
- Add your first pin, then drag it to the exact spot on the image it should mark.
- Add as many pins as the image needs, positioning each one.
Choosing your pin type
Each pin can be more than a plain dot. The widget lets you use text, an icon, an image, or a Lottie animation as the marker, so you can match the pins to the design.
A numbered text pin works well for a step-by-step diagram, an icon suits a feature map, and a subtle Lottie animation draws the eye when you want people to notice there is something to click.
You can also set a normal and hover color for the pins so they respond when the cursor lands on them. If you are using icon pins and want them to match your palette, our guide to coloring custom SVG icons in Elementor is handy.
Adding tooltips and links to each pin
A pin on its own is just a marker. The value is in what it reveals. Turn on the tooltip for a pin and add the hover content that belongs to that spot, then use the extra tooltip options to control its position and styling so it never covers the part of the image it is describing.
Keep the copy tight, since a tooltip is a glance, not a paragraph.
Each pin can also carry a custom link. That is what turns a team photo into a set of bio links, or a product diagram into a set of jumps to detailed pages. Decide per pin whether it should simply explain (tooltip only) or send the visitor somewhere (link).
Positioning pins and keeping them responsive
Pins are positioned as points on the image, so they move with it as the image scales. The thing to watch is small screens. A layout that looks clean on desktop can bunch pins together on a phone, and tooltips that open to one side can run off the edge.
Before you publish, preview at mobile width, confirm every pin is easy to tap with a thumb, and check that each tooltip opens somewhere it stays fully visible. If two pins sit almost on top of each other, nudge them apart or drop one.
Design and performance tips
A few habits keep an interactive image feeling sharp rather than cluttered:
- Do not overload the image. A handful of well-placed pins reads as helpful. Twenty reads as noise. If you need more, split the content across two images.
- Signal that it is interactive. A subtle loop animation on the pins, used sparingly, tells people there is something to click without a caption spelling it out.
- Optimize the base image. The hotspots are lightweight, but the underlying image still needs to be sized and compressed properly so it does not drag down load time or shift the layout. That is the same discipline that protects your Elementor performance and Core Web Vitals, and if compression ever softens a photo, see how to fix blurry images in Elementor.
- Write real alt text on the base image, since the interaction itself is visual and a screen reader cannot infer it.
Wrapping up
Image hotspots are a simple way to make one image do the work of a whole explainer. Pick a clear base image, add a few pins with tight tooltips, link the ones that should go somewhere, and test it on a phone.
That is the entire job, and none of it needs code. If you like this kind of interactive touch, the before/after image slider, image carousel, and carousel slider widgets pair well with it.
The Hotspot widget is part of The Plus Addons for Elementor, alongside the rest of its widget library. If you want interactive images plus the other widgets in one add-on, you can browse the full set and pricing below.
