Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Free

Image Hotspot for Elementor Clickable points on any image, each with its own tooltip

The Elementor image hotspot widget turns a photo into an Elementor interactive image. Place markers on the details that matter, let them pulse, and show an Elementor hotspot tooltip with text, an image or a link on hover or click. Use it as an Elementor image map, for product photos and for team pages. Free, on Elementor Free.

Try it free See the live demos
  • Free on WordPress.org
  • Tooltip on hover or click
  • Dot, icon or text markers
  • Pulse or Soft Beat motion

Classic widget · Elementor 3 and 4Updated

Live demos

Four image hotspot designs, live

Four hotspot designs on small sites: a hotel case study, a shop the look page, a room ideas page and a crew page. Point at a marker, tab to it with the keyboard, or tap it on a phone to open its tooltip.

Arolax®WorkStudioContact
Case study · Halden Hotel

Inside the lobby we designed

A hotel lobby with wooden slat walls, orange chairs and low round tables

Interior design by Arolax for Halden Hotel, Lyon. Point at a detail to read about it.

Case study image map

Elementor image hotspot with a white tooltip

A case study page for a hotel lobby. Four black dots with a white ring pulse on the photo. Point at one and a white card with an orange edge opens below it and names the detail.

Point at a dot

In the panel, set Trigger Type to Hover, Position to Bottom, Animation to Pulse and Pulse Color to white. In the Style tab, give the dot a thick white Border.

Maison FormeShopRoomsJournal
Shop the room

The Sunday lounge

A bright lounge with white chairs, a yellow sofa, a floating stair and a round rattan table

Five pieces in this room. Point at a red dot to see each one.

Shop the look

Elementor product hotspots on a room photo

A room page for a furniture shop, set up as an Elementor shop the look page. Five small red dots mark the chairs, the sofa and the table. Point at one and a grey card shows the product name and its price.

Point at a red dot

In the panel, set Trigger Type to Hover, Position to Bottom, Alignment to Center and Gap to 32 px. Set Pulse Color to a soft red.

NorthlightShopBedroomStores
Room ideas

A slow Sunday bedroom

A bedroom with a linen bed, a long wooden bench, rattan baskets and a round jute rug
Room ideas

Hotspots with a dark tooltip above

A bedroom page for a home store. The photo sits in a dark rounded card. Black dots mark the bench, the throw, the stool and the rug. Each one opens a dark label above the dot, with the category in orange.

Point at a dot

In the panel, set Trigger Type to Hover and Position to Top. In the Style tab, set the tooltip Background to dark grey and round it with Border Radius.

Sahara FilmsFilmsCrewPress
Dune Light · 2026

The crew behind the film

Portrait of Lina Haddad
Portrait of Youssef Amrani in a blue scarf
Portrait of Maya Osei
Portrait of Clara Duval
Inès Moreau looking out to sea
Portrait of Zoé Laurent
Nadia Benali dancing on a rooftop
Crew page

Round portraits with a tooltip each

The crew page of a film. Seven round portraits float on a dark background, each with one white dot below the face. Point at the dot to read the name and the job. On a phone four portraits show.

Point at the dot under a face

Each portrait is its own Image Hotspot with one hotspot. Place the dot with Horizontal Offset 40% and Vertical Offset 91%, and set the image Border Radius to 50% in the Style tab.

Features

Key features of Image Hotspot

What the hotspot widget gives you, each tied to a setting in the Elementor panel.

Four marker styles

Set Hotspot Layout to Default for a dot, or to Icon, Text or Icon + Text for image markers that say what they are.

Rich tooltip content

Tooltip Content is a full text editor, so an Elementor image tooltip can hold headings, text, links and images from Add Media.

Links like an image map

Set Tooltip Type to Link and the marker becomes a link to any page. That gives you an Elementor image map where each spot opens its own page.

Precise position

Move each point with Horizontal Offset and Vertical Offset in the Position tab, per device, in %, px or em.

Hover, click or always on

Trigger Type opens tooltips on Hover or Click, or keeps them visible with None. Choose Click for an Elementor hotspot on click, which suits phones.

Pulse or Soft Beat

Pick an Animation for an Elementor hotspot pulse animation, then set the Animation Speed in seconds and the Pulse Color.

Tooltips on four sides

Show the tooltip at the Top, Bottom, Left or Right of the marker, and set its Gap and Alignment.

Style every part

Size the image with Width, Height and Border Radius. Style the markers with Background, Border, Padding, dot Width and Height, text Typography, Icon Size and Icon Gap, and the tooltip with its own Background, Width, Border Radius and Padding.

Step by step

How to add hotspots to an image in Elementor

Five steps, no code. The bold names are the labels in the Elementor panel.

  1. Install Animation Addons for Elementor from WordPress.org, then turn on Image Hotspot in Animation Addons → Widgets, under General.

  2. In Elementor, search the panel for Image Hotspot, drag it onto the page and choose the Image and its Image Resolution.

  3. In Hotspot Lists, add one item per point. Pick the Hotspot Layout and Tooltip Type, write the Tooltip Content, then set Horizontal Offset and Vertical Offset in the Position tab.

  4. Choose the Animation, Animation Speed and Pulse Color. Under Tooltip, set the Trigger Type, Position, Gap and Alignment.

  5. Style the image, markers and tooltip in the Style tab, then check the page on a phone and set a smaller tooltip Width there if a tooltip runs off the screen.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about Image Hotspot

How do I add hotspots to an image in Elementor?

Add the free Image Hotspot widget from Animation Addons and choose an image. Add one item per point in Hotspot Lists, write its tooltip, and place it with Horizontal Offset and Vertical Offset. No code.

Can the tooltip open on click instead of hover?

Yes. Set Trigger Type to Click. A click on a marker opens its tooltip and closes the others, and a click anywhere else closes it. None keeps every tooltip visible.

Can a hotspot link to another page?

Yes. Set the point's Tooltip Type to Link and add the URL. The marker becomes a link with no tooltip, and you can open it in a new tab or add nofollow.

What can I put inside a tooltip?

Tooltip Content uses the WordPress text editor, so a tooltip can hold headings, paragraphs, links and images added with Add Media.

How do I make the hotspots pulse?

Set Animation to Pulse for two rings that spread from each marker, or Soft Beat for a gentle grow and shrink. Animation Speed sets the length in seconds, 3 by default.

Do image hotspots work on phones?

Yes. Points are placed as a share of the image, so they stay on the same spot. Phones have no real hover, so Click is the safer trigger. Set a smaller tooltip Width on mobile.

Is there a free Elementor image hotspot?

Yes. The Image Hotspot widget ships in the free Animation Addons plugin on WordPress.org and works with Elementor Free. Elementor Pro is optional.

How do I make an Elementor image map?

Add Image Hotspot, place one point on each area, and set Tooltip Type to Link with the page URL. Each spot then opens its own page.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets. For a native atomic version, see the Image Hotspot atomic element in Animation Addons Pro.

Animation Addons Pro · Elementor 4

Images that explain themselves

Clickable points with tooltips on any image, built and styled in Elementor, free.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license