How to configure and style Elementor Image Hotspot Widget
Place several interactive points on the hotspot images that will unveil a popup tooltip when clicked or hovered. Add an interactive section with 3 different styles endless customizable options using Image Hotspot Widget of Exclusive Addons Elementor.
STEP 1:
Select the ‘Image Hotspot‘ widget from Elementor panel. Then drag and drop it in the selected area.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-1.png)
STEP 2:
In the Container tab, you have the options to configure Hotspots, Background, and tooltip Settings.
2.1 In Hotspot section, choose hotspot Style among ‘Default‘, ‘Style-1‘, and ‘Style-2‘.
Also, add as many hotspots as you want by clicking ‘Add Items’ button, and delete items with ‘Cross’ button.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-2.1.png)
With each hotspot, you can enable or disable tooltip and set its contents like tooltip Image, Heading, Subheading, Button Text, and URL.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-2.1a.png)
Also, you can adjust hotspot Position for each hotspot.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-2.1b.png)
Choose the icon type between Icon and Text. If you select Icon, set Icon Image as well.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-2.1c.png)
You can enable or disable Custom Style option. When enabled, set Background Color, Icon Color, Border type, and Box shadow.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-2.1d.png)
STEP 3:
Style tab allows you to customize Background, Hotspot, Tooltip, and Tooltip Content.
3.1 In the Image/Colored Background section, enable or disable Overlay option.
Also, adjust Image Height/Background Height, choose Border Type, set Border Radius, and Box Shadow.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-3.1.png)
3.2 For Hotspot section, you can set Icon Size and Color. Also, choose Background Color, adjust Height and Width, and decide over Border Type, Border Radius, Box-shadow, and Padding.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-3.2.png)
What makes this Image Hotspot unique is animation. Decide which one suits you the best from a list of animations available with the widget.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-3.2a.png)
3.3 Tooltip section lets you decide over the attribute like tooltip Padding, Background color, Border Type, Border radius, and so on.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-3.3.png)
3.4 Tooltip Content section comes with a lot of customizable options for each item. Set Alignment, Typography, Text Color, and Margin for Heading. Also set Typography, Text Color, and Margin for subheading.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-3.4a.png)
For Button, set Typography, Padding, and Border Radius along with choosing different Background Color, Text Color, Border Type, and Box Shadow for both ‘Normal’ and ‘Hover’ state.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-3.4b.png)
Choose Image Height, Border Type, Border Radius, and Box Shadow for Tooltip Image.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-3.4c.png)
STEP 4:
Finally, hit the Update button, and include a stylish Image Hotspot Widget on your WordPress site.
![](https://exclusiveaddons.com/wp-content/uploads/2020/12/Image_Hotspot-4.png)