Hotspot

The Hotspot Widget in the Topper Pack allows you to create interactive image areas with clickable markers. It’s ideal for maps, product showcases, or any image that needs additional contextual information through tooltips or popups.

🧩 How to Enable the Widget

1. Go to your WordPress dashboard.
2. Navigate to Topper Pack > Widgets.
3. Toggle the switch to enable the Flip-box widget.
4. Once enabled, it will be available inside the Elementor editor under the Topper Pack section.

1. Add the Widget

• Drag and drop the Hotspot widget into your Elementor section.
• It will automatically display a default image with sample hotspots.

2. Upload Background Image

• Go to the Content tab → Hotspot Content.
• Upload a high-resolution image (e.g., a world map or product layout).
• Configure image settings:
  • Position: Center
  • Size: Contain / Cover
  • Repeat: No Repeat

3. Add Hotspot Items

• Click Add Item under Hotspots.
• For each item, configure:
  • Enable Icon (optional): Toggle if using an icon instead of a plain dot.
  • Title: Title for the popup (e.g., “New York Office”).
  • Content: Add relevant info (e.g., “Open Mon-Fri, 9AM–6PM”).
  • Button Link: Add a URL or anchor if needed.
  • Position: Adjust using the Top/Right/Bottom/Left sliders.
  • Active by Default: Enable if this hotspot should auto-display on page load.

4. Style the Hotspot Markers

Go to the Style tab → Hotspot Markers

• Marker Size: Customize the size of each point.
• Image Height: Set max height of image if needed.
• Background Type: Use color, gradient, or image background.
• Color: Set icon or text color.
• Border: Add border, adjust radius.
• Box Shadow: Add a subtle shadow for visibility.
• Enable Ripple: Enable ripple animation for the marker on hover.

5. Style the Tooltip (Popup Box)

Go to Style → Content Box

• Customize:
  • Typography for title and content.
  • Padding/Margin around content.
  • Background, Border, and Shadow for the popup.
  • Responsive control for different devices.

💡 Use Cases

• Show office locations on a map
• Highlight product parts with extra information
• Visual learning aids with contextual tips