Hotspots
Let visitors explore an image and the products in it.
Point at parts of any image: draggable spots open rich tooltips, WooCommerce product cards or a guided tour, with a numbered legend and a phone-friendly panel.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Hotspots — it is in the Moduly category.
- Insert it, then fill in its content on the canvas.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
- Add or reorder items with the + inside the block; each item (Hotspot) has its own settings when selected.
Settings
Behaviour
| Setting | What you can set |
|---|---|
| Open tooltips on | hover, click, always or tour |
| Tooltip position | auto, top, bottom, left or right |
| Tooltip animation | rise, fade, zoom, slide or none |
| Spots pop in when scrolled into view | On / off |
| List of the spots | none, below or side |
| On phones | sheet, tips or list |
| Only one tooltip open at a time | On / off |
| Move on by itself | On / off |
| Seconds per spot | 1–20 |
| Loop | On / off |
| Start when scrolled into view | On / off |
| “Previous” text | Text |
| “Next” text | Text |
Spots
| Setting | What you can set |
|---|---|
| Image size | medium, medium large, large or full |
| Image maximum width (px) | 0–1600 |
| Spot animation | ripple, pulse, glow, bounce or none |
| Spots show | icon, dot, number, text or image |
| Shape | circle, rounded, diamond or pin |
| Spot size (px) | 16–80 |
| Tooltip width (px) | 160–480 |
| Tooltip radius (px) | 0–30 |
| Spot | Colour |
| Spot icon / text | Text |
| Open spot | Text |
| Tooltip background | Colour |
| Tooltip text | Text |
| Accent (buttons, prices) | Colour |
| Dim the image while open | Text |
Hotspot (item) settings
Behaviour
| Setting | What you can set |
|---|---|
| Tooltip position | auto, top, bottom, left or right |
Spot
| Setting | What you can set |
|---|---|
| Left (%) | 0–100 |
| Top (%) | 0–100 |
| Spot shows | icon, dot, number, text or image |
| Label | Text |
| Tooltip | custom, product or none |
| Price | Text |
| Open in a new tab | On / off |
| Button text | Text |
| Open when the page loads | On / off |
Styles tab: spacing, from WordPress's own design tools.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Spot positions are percentages of the image, so they stay put at any width. Very small spots on very narrow images can overlap. Use the list layout on phones for dense images.
- The product tooltip button follows WooCommerce: variable products show “Select options” (a link), and simple products use AJAX add-to-cart.
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor).
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
Related
- Also available for Elementor (Hotspots).
- Works well with: Advanced Slider, Animated Heading, Animated Icon.