BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Image Hotspots Widget for Elementor Pro

Pin markers with tooltips on any image

Overview

What Image Hotspots does

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.

Live demo

See it in action

Video

See it in video

Features

What it can do

  • Four marker types per hotspot: Icon, Text / Number, Image or Dot.

  • Tooltips open on Hover, on Click, or stay Always Visible.

  • Tooltip content is a rich text editor, so links, lists and images are allowed.

  • Tooltip position (top, bottom, left, right) set globally and overridden per hotspot.

  • Guided tour that opens each tooltip in turn until the visitor interacts.

  • Pulse animation on markers, with a per-hotspot switch to turn it off.

  • Marker entrance animation when the image scrolls into view: Pop In, Fade In or Drop In.

  • Tooltips are moved to stay inside the screen, and single hotspots can be hidden on mobile.

Use cases

When to use it

Product feature callouts

Mark the parts of a product photo and describe each one in its tooltip.

Floor plans and maps

Number the rooms or locations with Text / Number markers and add details for each.

Annotated screenshots

Point at areas of an app or dashboard screenshot and explain what they do.

Self-running tour

Turn on the guided tour so the tooltips open one after another without any input.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag Image Hotspots onto the page and choose the picture in the Image section.

  2. Open Hotspots and edit the default items or add new ones.

  3. In each hotspot, pick a Marker type and fill in Tooltip Title and Tooltip Content.

  4. Switch to the Position tab of the hotspot and move it with Horizontal Position (%) and Vertical Position (%).

  5. Open Tooltip Settings and choose Open Tooltip On, Default Position and Tooltip Animation.

  6. Optionally turn on Guided Tour (Auto Open in Turn) and set Tour Interval (ms).

  7. Style the image, markers and tooltip in the Style tab.

FAQ

Questions and answers

Do the hotspots stay in the right place on mobile?

Yes. Positions are percentages of the image, so markers scale with it. Both position sliders can also be set separately per device.

Can a tooltip contain links or images?

Yes. Tooltip Content is a rich text editor, so links, lists and images are allowed.

Can a marker link to another page?

Yes. Add a Marker Link to the hotspot. The marker becomes a link, and this works best with the Hover trigger.

How do visitors close a tooltip?

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.

Bright Addons Pro

Get Image Hotspots with Bright Addons Pro

Bright Addons Pro has 77 Pro widgets plus all 48 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $16 a year, with a 14-day money-back guarantee.