--- title: "How to Add an Elementor Hotspot on an Image?" url: https://theplusaddons.com/docs/add-an-elementor-hotspot-on-an-image/ date: 2024-05-10 modified: 2026-09-22 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-an-Elementor-Hotspot-on-an-Image_-1024x536.jpg word_count: 790 --- # How to Add an Elementor Hotspot on an Image? ## - The Hotspot widget in The Plus Addons for Elementor Pro places as many pins as needed on one image and positions each pin by percentage so it stays in place as the image scales. - The Plus Addons for Elementor Pro requires the widget to be installed and activated, and the free plugin renders nothing at all on the page. - Pin Position uses separate Desktop, Tablet, and Mobile groups, but Tablet and Mobile only take over when Responsive Values is turned on for that device. - The tooltip opens on hover by default, shows the Description text to visitors, and turning Link on makes the whole pin clickable. 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.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/hotspots/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## 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. ![The Hotspot widget in The Plus Addons for Elementor.](https://theplusaddons.com/wp-content/uploads/2024/05/hotspot.png) ## 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. ![The Hotspot widget's Content section with Hotspot Image and Add Multiple Pin Hotspot.](https://theplusaddons.com/wp-content/uploads/2026/09/hotspot-content.webp) ## 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. ![A hotspot pin on a product photo with its tooltip open above it.](https://theplusaddons.com/wp-content/uploads/2026/09/hotspot-result-icon.webp) ![Animated demo of adding hotspot pins to an image.](https://theplusaddons.com/wp-content/uploads/2024/05/hotspot-content.gif) ## 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. ![Pin Position with the Desktop Left and Top sliders.](https://theplusaddons.com/wp-content/uploads/2026/09/hotspot-pin-position.webp) | 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?](https://theplusaddons.com/docs/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. https://www.youtube.com/watch?v=Cmp7vk_RKKE ## 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**. ## Related Docs - [How to Open a Hotspot Tooltip on Click in Elementor?](https://theplusaddons.com/docs/hotspot-tooltip-on-click-in-elementor/)- [How to Use an Image as a Hotspot Pin in Elementor?](https://theplusaddons.com/docs/use-an-image-as-a-hotspot-pin-in-elementor/)- [How to Use Text as a Hotspot Pin in Elementor?](https://theplusaddons.com/docs/use-text-as-a-hotspot-pin-in-elementor/) ## Frequently Asked Questions **Q: Why is the hotspot widget not showing anything on my page?** A: The widget is Pro only, so it needs The Plus Addons for Elementor Pro to be active. The page also says the Hotspot widget must be switched on under The Plus Addons > Widgets. When the free plugin was used, the widget rendered nothing at all, with no placeholder and no image. That makes this a setup issue, not a styling issue, so check activation first before looking at pin settings. **Q: What do I need before adding a hotspot to an image?** A: The setup depends on three things: The Plus Addons for Elementor Pro, the Hotspot widget turned on in The Plus Addons > Widgets, and an image from your Media Library that is large enough for the pins to sit apart from each other. That last part matters because crowded pins are harder to place cleanly and harder for visitors to read in the tooltip. **Q: How do hotspot pins stay in the same place on different screen sizes?** A: Hotspot pins are positioned by percentage, not by fixed pixels. The page says that keeps them in the right place as the image scales, which is why a pin set to 30% left and 40% top still lands at that relative spot on the published page. For responsive layouts, each pin also has separate Desktop, Tablet, and Mobile groups. **Q: Why is my hotspot pin invisible but the tooltip still works?** A: That usually points to a missing icon font. The page says the widget does not load an icon font, so an Icon pin can come out blank if nothing else on the page loads Font Awesome. A practical fix is to switch Pin Type to Text or Image, or make sure another element on the page loads Font Awesome. **Q: Can I make a hotspot open on click instead of hover?** A: The default behavior is hover, but the page points to [How to Open a Hotspot Tooltip on Click in Elementor?](https://theplusaddons.com/docs/hotspot-tooltip-on-click-in-elementor/) for tap or click behavior. That matters on touch devices because hover is not always available there. The tooltip content still comes from Description, while Title stays hidden from visitors. **Q: What is the best way to position a hotspot pin accurately?** A: Use Left (Auto / %) and Top (Auto / %) together, then adjust the sliders until the pin sits where you want it. The page says there is no drag-and-drop placement on the canvas, so percentage positioning is the real control here. If both Left and Top are off, the pin falls back to the widget’s default position, which is why misaligned pins usually come from those toggles being disabled.