How to set up and style the Image Hotspots widget in Elementor.
Image Hotspots places markers on an image at positions you set in percent, so they stay in place at every screen size. Each marker opens a tooltip with a title and rich content on hover, on click, or all the time. Use it to explain product photos, floor plans, maps and diagrams.
Part of: Bright Addons Pro.
| Option | What it does |
|---|---|
| Image | The picture the hotspots sit on, with a choice of image size. |
| Option | What it does |
|---|---|
| Hotspots | The list of markers. Each one has Content, Position and Style tabs. |
| Marker | Sets the marker type: Icon, Text / Number, Image or Dot. |
| Marker Text | The text or number shown inside a Text / Number marker. |
| Marker Image | The picture used for an Image marker. |
| Tooltip Title | The heading of the tooltip, also used as the marker's accessible name. |
| Tooltip Content | The body of the tooltip, written in a rich text editor. |
| Marker Link | Optional. Turns the marker into a link, which works best with the Hover trigger. |
| Horizontal Position (%) | Distance of the marker from the left edge of the image, per device. |
| Vertical Position (%) | Distance of the marker from the top edge of the image, per device. |
| Tooltip Position | Overrides the default tooltip side for this hotspot. |
| Hide on Mobile | Hides this hotspot on screens 767px wide and smaller. |
| Marker Color | A marker color for this hotspot only. |
| Marker Background | A marker background and pulse color for this hotspot only. |
| Disable Pulse | Turns the pulse off for this hotspot. |
| Option | What it does |
|---|---|
| Open Tooltip On | Hover, Click or Always Visible. |
| Default Position | The side tooltips open on: Top, Bottom, Left or Right. |
| Tooltip Animation | How tooltips appear: Fade, Slide, Zoom or None. |
| Show Arrow | Adds a small arrow pointing from the tooltip to the marker. |
| Close on Outside Click | Closes open tooltips when the visitor clicks elsewhere (Click trigger). |
| Only One Open at a Time | Closes other tooltips when a new one opens (Click trigger). |
| Guided Tour (Auto Open in Turn) | Opens each tooltip in turn until the visitor interacts. |
| Tour Interval (ms) | Time each tooltip stays open during the tour, 800 ms at least. |
| Loop Tour | Starts the tour again after the last hotspot. |
| Pulse Animation | Adds a pulsing ring around every marker. |
| Entrance Animation | How markers appear when the image comes into view: None, Pop In, Fade In or Drop In. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
width, alignment, border, border radius, box shadow, CSS filters and an overlay color.
marker size, icon and text size, typography, color, background and scale for normal and hover or active, Rotate Icon When Open, border, radius, padding, shadow, pulse color and pulse size.
width, distance from the marker, text alignment, background, border, radius, padding, shadow, title and content typography and colors, and link color.
Yes. Positions are percentages of the image, so markers scale with it. Both position sliders can also be set separately per device.
Yes. Tooltip Content is a rich text editor, so links, lists and images are allowed.
Yes. Add a Marker Link to the hotspot. The marker becomes a link, and this works best with the Hover trigger.
With the Click trigger they click the marker again, click outside when Close on Outside Click is on, or press Escape while the hotspot has keyboard focus.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide