Hotspots are used to add interactive hotspots to the images with tooltip sections. There are many customization options given by the widget which allow you to style the hotspot as per your wish.
Content Tab#
Here you can add the image to the image hotspot widget. You can add multiple hotspots to your image using the second subsection and make changes to the hotspots as well. You can also change the attributes for the tooltip using the tooltip section.
Style Tab#
All the styling needed to be done is taken care of in this section. You can change the image size and attributes of the hotspot, such as color, padding, border, and background, and the same for the tooltip can be done as well.
Advanced Tab#
This Tab has five subsections-
- Element Style - Here, you can change the margin, padding, z-index, and entrance animation and add CSS ID and classes.
- Background - Here, you can set the background as classic or gradient and can even add the hover effects.
- Border - Here, the properties related to the border are defined as border type, radius, box-shadow, and hover effects.
- Responsive - Here, you set the responsiveness of the different devices to be active or not.
- Custom CSS - This lets you add CSS code to the widget, and you can see it render live right in the editor.