How to use the Image Hotspot Widget in Elementor

What is the Image Hotspot widget?

The Image Hotspot widget allows you to create interactive, engaging images by placing clickable or hoverable points (hotspots) over a base image. When a user interacts with these points, a tooltip appears to reveal additional information, links, or media. It is a powerful tool for transforming static visuals into immersive experiences.

Common use case

The most common use case for the Image Hotspot widget is interactive product showcases for e-commerce sites. For example, a furniture brand can use a single high-quality photo of a fully furnished room and place hotspots on the sofa, lamp, and rug. When a customer clicks a hotspot, they see the product name, price, and a direct link to purchase the item.

Additional use cases

• Interactive Maps: Highlight specific locations or landmarks on a custom map with detailed descriptions for each point.
• Anatomy of a Product: Break down complex machinery or software features by pointing out specific components and explaining their functions.
• Team Photos: Place hotspots over team members in a group photo to show their names, titles, and social media links.

Requirements

• You need the Marquee Addons  plugin installed and activated on your website.
• You can find detailed installation instructions in our dedicated installation blog post.
• Make sure that this addon is enabled so you can find it in the Elementor editor.
• Marquee Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well..

Add the widget

1. Search for the Image Hotspot widget in the Elementor panel and drag it into your layout.
2. In the Content tab, under the Image section, click Choose Image to upload or select your base visual.
3. Expand the Hotspot section to begin adding individual points.
4. Adjust the position of each hotspot by switching to the Position tab within the hotspot item settings.

Settings for the Image Hotspot widget

Content Tab

The Content tab defines the structure, information, and triggers for your interactive points.

1. Choose Image: Select the background image that will host the hotspots.
2. Image Resolution: Choose the appropriate resolution (e.g., Thumbnail, Medium, Large, Full) for your background image.

Hotspot

You can manage individual hotspots in this repeater list. Each item has two internal sub-tabs:

• Content (Item Level)
  1. Label: Add text that appears directly on or next to the hotspot marker.
  2. Link: Enter a URL to make the hotspot a clickable link.
  3. Icon: Choose an icon to represent the hotspot point.
  4. Custom Hotspot Size: A toggle to define a unique size for this specific hotspot rather than using the global style.
  5. Tooltip Content: A full text editor where you can add text, links, or media that appear inside the tooltip.

• Position (Item Level)
  1. Horizontal Orientation: Align the hotspot starting from the left or right side of the image.
  2. Horizontal Offset: Use the slider or numerical input to precisely place the hotspot horizontally.
  3. Vertical Orientation: Align the hotspot starting from the top or bottom of the image.
  4. Vertical Offset: Use the slider or numerical input to precisely place the hotspot vertically.
  5. Custom Tooltip Properties: A toggle that allows you to override global tooltip settings for just this specific hotspot.
  6. Add Item: Add new hotspot item

Global Hotspot Settings

1. Animation: Choose an entrance or attention-grabbing animation for the hotspots, such as Soft Beat, Expand, or Overlay.
2. Sequenced Animation: Turn this On to have hotspots appear one after another rather than all at once.
3. Sequence Duration (ms): Set the speed of the sequential entrance.

Tooltip

1. Position: Choose where the tooltip appears relative to the hotspot (Top, Bottom, Left, Right).
2. Trigger: Decide if the tooltip appears on Hover, Click, or not at all (None).
3. Animation: Select the transition effect for the tooltip opening, such as Fade In/Out, Fade Grow, Fade By Direction, or Slide By Direction.
4. Animation Duration (ms): Controls the speed of the tooltip opening animation.

---

Style Tab

The Style tab provides granular control over the visual aesthetics of the base image, the markers, and the pop-up tooltips.

Image

1. Alignment: Set the horizontal alignment of the base image within its container.
2. Width / Max Width: Control the scale of the image relative to its container.
3. Height: Manually set a fixed height for the image.
4. Opacity: Adjust the transparency of the image for Normal and Hover states.
5. CSS Filters: Apply visual effects like Blur, Brightness, or Grayscale to the base image.
6. Border Type: Choose from Solid, Doubled, Dashed, etc..
7. Border Radius: Round the corners of the base image.
8. Box Shadow: Add a shadow effect behind the base image.

Hotspot

1. Color: Set the color of the hotspot icon or label.
2. Size: Adjust the overall size of the hotspot marker.
3. Typography: Customize the font of the hotspot label.
4. Min Width / Min Height: Set minimum dimensions for the hotspot marker box.
5. Box Color: Change the background color of the hotspot marker.
6. Padding: Add space inside the hotspot marker around the icon/label.
7. Border Radius: Round the corners of the hotspot marker box.
8. Box Shadow: Add a shadow effect to the hotspot marker to make it pop from the image.

Tooltip

1. Text Color: Set the color of the text inside the tooltip.
2. Typography: Customize the font style for the tooltip content.
3. Alignment: Align the text within the tooltip box (Left, Center, Right, Justified).
4. Box Settings:
   • Min Width / Max Width: Define the boundaries of the tooltip pop-up.
   • Padding: Set the internal spacing of the tooltip box.
   • Color: Set the background color of the tooltip.
   • Border Radius: Round the corners of the tooltip box.
   • Box Shadow: Add a shadow to the tooltip for a 3D effect.

Advanced Tab

The Advanced tab provides a comprehensive set of controls that are common to most Elementor widgets, allowing for refined design and responsiveness. Here you can adjust the widget’s Layout (e.g., positioning, Z-index), apply engaging Motion Effects (like scrolling effects or entrance animations), customize its Background, add Borders and Box Shadows, apply Masks for unique shapes, control Responsive visibility across devices, add custom HTML Attributes, and inject Custom CSS for furfure styling.

Frequently Asked Questions (FAQ)

Are hotspots mobile-responsive?

Yes. You can adjust the Offset and Size of hotspots specifically for Tablet and Mobile views using the viewport icons next to those settings.

---

Can I use images or videos inside the tooltip?

Yes. The Tooltip Content area supports the “Add Media” button, allowing you to include images or rich text within the pop-up.

---

Can I make the hotspots pulse to grab attention?

Yes, by selecting the Soft Beat or Expand animation in the Hotspot settings, the markers will continuously animate to draw the user’s eye.