Image Hotspot Widget

Add interactive markers to showcase key points, product features, or important information — all without cluttering your design using Image Hotspot Widget.

Follow the step-by-step instructions:

1. Go to Menu RTMKit Pro.

2. Then, you’ll see the Image Hotspot Widget appear.

3. Click Add New Container.

4. Select your layout : Flexbox or Grid.

5. On the canvas select your structure.

6. Drag the widget from the Elementor 

7. Drop it on the selected area.

8. Setting Spot Items :

• Click Content → Image Hotspot Content.

• In the Show Content As field, choose from four styles: Text Only, Image Only, Text and Image, or Dynamic Content.
• Select Dynamic Content if you want to link it to WooCommerce, then add your product information in the Product menu. 
• Select the image to be displayed in the tooltip, add the Spot Title and Description, and adjust the tooltip’s vertical and horizontal positions.
• Choose the tooltip placement: top, right, bottom, or left.
• Use Duplicate or Add Item to create a new spot item.

• In the Configuration section, set the trigger behavior to hover or click.
• Choose an effect: Pulse or Ripple, and select a theme: Light, Dark, or Custom.
• Select an icon that matches your design.

9. Image Style (used to customize the image style) :

• Click Style → Image.
• In the Image section, adjust alignment, max width, width, height, object fit, and object position.

10. Tooltip Style (used to customize the tooltip style) :

• Click Style → Tooltip.
• In the Tooltip section, customize padding, border radius, background color, text color, title typography, title alignment, description typography, and description alignment.

11. Image Hotspot Style (used to customize the image hotspot style) :

• Click Style → Hotspot.
• In the Hotspot section, adjust spot color, spot wrapper radius, icon size, and hotspot size to match your design.

12. Finished setting up? Don’t forget to click Publish to make your Image Hotspot interactive.