--- title: "How to Add a WordPress Hotspot on an Image?" url: https://nexterwp.com/docs/add-a-wordpress-hotspot-on-an-image/ date: 2024-12-04 modified: 2026-09-28 lang: en author: "Aditya Sharma" description: "A photograph of a product, a floor plan or a diagram often needs labels — and a caption underneath makes the reader match words to places on their own. The..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-WordPress-Hotspot-on-an-Image_-1024x519.jpg word_count: 672 --- # How to Add a WordPress Hotspot on an Image? ## Key Takeaways - Hotspot block coloca pines pequeños sobre una imagen y abre un tooltip propio en cada pin, con posiciones definidas por Left (%) y Top (%). - Nexter Blocks Pro requiere activar Hotspot en Nexter > Blocks dentro del panel de WordPress antes de usar el bloque. - Pin type ofrece cuatro opciones: Icon, Image, Text o None; None no muestra nada, pero mantiene el área interactiva y el tooltip sigue abriéndose. - Tooltip toggle no elimina un tooltip existente; para quitarlo, activa el interruptor, borra Tooltip Text y luego desactívalo. A photograph of a product, a floor plan or a diagram often needs labels — and a caption underneath makes the reader match words to places on their own. The Hotspot block puts the labels on the image itself: small pins you position by percentage, each opening its own tooltip. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-hotspot-pinpoint-image/) ## Before You Start - **Edition:** **Pro** — the Hotspot block needs Nexter Blocks Pro.- **Block to enable:** Hotspot, switched on under **Nexter > Blocks** in your WordPress dashboard. ## Video Tutorial https://www.youtube.com/watch?v=tKEHYhU4agI ## Steps - Add the **Hotspot** block to your page. ![Enabling the Hotspot block in Nexter > Blocks](https://nexterwp.com/wp-content/uploads/2024/12/hotspot-activation-new-1.webp) - Choose the image the pins will sit on, and set its **Image Size**. ![Choosing the hotspot background image](https://nexterwp.com/wp-content/uploads/2024/12/hotspot-design-type.webp) - Open the pin list and use **Add Pins** to create as many pins as you need. ![The pin list with Add Pins](https://nexterwp.com/wp-content/uploads/2024/12/hotspot-content-new.webp) - For each pin, pick a **Pin type** — Icon, Image, Text or None. - Place the pin with **Left ( % )** and **Top ( % )**. - Switch **Tooltip** on and write the **Tooltip Text** that should appear. ![The tooltip settings for a pin](https://nexterwp.com/wp-content/uploads/2024/12/hotspot-style-new.webp) ![A hotspot pin at rest on the image](https://nexterwp.com/wp-content/uploads/2026/09/hotspot-pin-content-before.webp) ![The same pin hovered, showing its tooltip content](https://nexterwp.com/wp-content/uploads/2026/09/hotspot-pin-content-after.webp) > *Each pin is placed with **Left ( % )** and **Top ( % )**, measured from the top-left of the image. Measured on a published page, pins set to 10/10, 50/50 and 85/80 landed at exactly those points, so the numbers behave as plain percentages and the pins stay put as the image scales.* ## How It Behaves | Pin type | What appears on the image | | -------- | ------------------------- | | Icon | An icon from the icon library — the default, a plus sign. | | Image | Your own image as the pin. See [the image pin doc](https://nexterwp.com/docs/use-an-image-as-a-hotspot-pin-in-wordpress/). | | Text | A short word or number instead of a symbol. See [the text pin doc](https://nexterwp.com/docs/use-text-as-a-hotspot-pin-in-wordpress/). | | None | Nothing visible at all — but the pin is still there and its tooltip still opens. Measured: an invisible hover region, useful for labelling an area without drawing on the image. | - **Tooltips open on hover by default**, and can open on click instead — see [opening a tooltip on click](https://nexterwp.com/docs/open-a-hotspot-tooltip-on-click-in-wordpress/).- Each pin has its own tooltip settings, so one pin can sit above its tooltip and another below it.- **Pins can be links.** Measured: with a URL set, the whole pin becomes a link.- Pins animate into place as the image scrolls into view, one shortly after another. ## Limitations - **The Tooltip toggle does not remove an existing tooltip** — clear the Tooltip Text instead. See the note below.- Pins are positioned by percentage, so a heavily cropped responsive image can move a pin away from the detail it points at — check your placements at phone width.- A pin's tooltip is plain text or simple markup; it is not a full block-editor canvas.- Pin type None leaves nothing visible, so tell readers the area is interactive some other way. > ***Switching the Tooltip toggle off does not remove an existing tooltip.** Measured on a published page: a pin with the toggle off still opened its tooltip on hover, showing the text typed earlier. Worse, the editor hides the Tooltip Text field once the toggle is off, so that text is no longer visible to edit. **To remove a tooltip, switch the toggle on, clear the Tooltip Text, then switch it off.** This is a known bug and has been reported to the development team.* ## Troubleshooting ### My tooltip still appears after turning the Tooltip toggle off That is the known bug described above. Switch the toggle back on, clear the **Tooltip Text**, then switch it off — measured as the reliable way to remove it. ### My pin is in the wrong place on phones Left and Top are percentages of the image. Set the responsive values for tablet and mobile so the pin tracks the part of the image it belongs to at every width. ### I can see the pin but no tooltip opens Check the pin has **Tooltip Text**. An empty tooltip is never shown — and check whether the trigger is set to Click rather than Hover. ### Nothing is visible where I placed a pin Its **Pin type** is probably set to None, which renders an invisible hover region by design. Choose Icon, Image or Text to draw something. ## Related Docs - [Use an image as a pin](https://nexterwp.com/docs/use-an-image-as-a-hotspot-pin-in-wordpress/)- [Use text as a pin](https://nexterwp.com/docs/use-text-as-a-hotspot-pin-in-wordpress/)- [Open a tooltip on click](https://nexterwp.com/docs/open-a-hotspot-tooltip-on-click-in-wordpress/)- [Advanced tab](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)