A hotspot turns a flat picture into something a visitor can explore – a pin on the collar of a jacket, on a room’s light fitting, on one part of a diagram – with a short note that appears when they point at it.
The Hotspot widget in The Plus Addons for Elementor puts as many pins as you like on one image, positions each by percentage so they stay put on every screen size, and shows the text you write in a small tooltip.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro. We published the same page with the free plugin only and the widget rendered nothing at all – no placeholder, no image.
- Switch it on: The Plus Addons > Widgets, search Hotspot, turn the toggle on.
- An image in your Media Library, large enough that the pins have room to sit apart from each other.
Steps
- Add the Hotspot widget to the page.
- In Content > Content, set Hotspot Image to your picture. Leave Image Resolution at Full unless you need a smaller file.
- Open the first row of Add Multiple Pin Hotspot. Give it a Title – that is only the row’s name in the panel, so you can tell your pins apart.
- Leave Pin Type on Icon and pick an icon, or switch to Image, Text or Lottie.
- Under Pin Position > Desktop, use Left (Auto / %) and Top (Auto / %) to place the pin, then drag the sliders until it sits where you want it.
- Under Pin Content, type the tooltip text in Description. Add more rows for more pins.
What You Will See
On the published page the pin sits exactly where the percentages put it. We set Left to 30% and Top to 40% and measured the pin at 30% and 40% of the widget; changing them to 75 and 20 moved it to 75% and 20%. Pointing at the pin opened a small dark tooltip above it carrying the description.
Pin Position
Each pin has its own Desktop, Tablet and Mobile group. Tablet and Mobile only take over when you turn Responsive Values on for that device; otherwise the desktop position is used everywhere.
| Setting | What it does | Default |
|---|---|---|
| Pin Type | Icon, Image, Text or Lottie pin | Icon |
| Left (Auto / %) | Switch on to position from the left edge | On, 40% |
| Top (Auto / %) | Switch on to position from the top edge | On |
| Continues Effect | The looping animation on the pin – Pulse, Floating, Tossing or one of the drop-wave effects | Normal Drop Waves |
| Image Resolution | Which registered image size is used | Full |
How It Behaves
- Positions are percentages of the image, so the pins stay in the right place as the image scales.
- The tooltip opens on hover by default. To open it on a tap or click instead, see How to Open a Hotspot Tooltip on Click in Elementor?.
- Title names the repeater row in the panel. It is not shown to visitors – visitors see Description.
- Turning a pin’s Link on makes the whole pin clickable. We clicked one and the browser left the page for the address we had entered.
Limitations
- Pro only. On the free plugin the widget does not render at all.
- The widget does not load an icon font. On a page where nothing else loads Font Awesome, an Icon pin comes out blank – we measured the icon glyph at zero size. Use an Image or Text pin, or make sure another element on the page loads Font Awesome.
- The panel spells the looping-animation control Continues Effect. That is the product’s own spelling, not a typo in this doc.
- There is no drag-and-drop placement on the canvas; pins are positioned with the sliders.
Troubleshooting
The pin is invisible but the tooltip still works
That is the missing icon font. Switch Pin Type to Text or Image, or add an element to the page that loads Font Awesome.
The widget shows nothing at all
Check that The Plus Addons for Elementor Pro is active and that Hotspot is switched on in The Plus Addons > Widgets.
The pin sits in the wrong place
Turn Left (Auto / %) and Top (Auto / %) on. With both off the pin falls back to the widget’s own default position.
Not verified
So you know exactly what has and has not been checked:
- The Lottie pin type.
- Tablet and Mobile pin positions, and Responsive Values.
- The individual Continues Effect animations, and the Style tab’s sizing, colour and overlay controls.
- Icons Mind and Font Awesome 5 as the Icon Font.
