Hotspot Widget
Use the widget to create interactive images that draw attention to the needed information.
Content
Image
Choose Image: Add the needed image here.
Image Size: Choose the image size from the dropdown.
Alignment: Choose the image alignment between left, center and right.
Hotspot
Add the needed amount of hotspots using +ADD ITEM button or copying items that are already added.
Icon Position: Choose between left and right icon position.
Animation: Choose between infinity animation or animation on hover.
Animation Type: Choose the animation type from the dropdown.
Tooltip
Position: Choose the tooltip position between left, top, right and bottom.
Arrow: Slide to YES to enable arrow.
Trigger: Choose when the trigger should be displayed – on hover, be click or always.
Animation: Choose animation type from the dropdown.
Duration: Set the animation duration in milliseconds.
Style
Image
Opacity: Set the opacity for Normal and Hover modes.
CSS Filters: Choose the desired CSS filters (blur, brightness,contract, saturation and hue).
Box Shadow: Choose the needed settings from the dropdown.
Width: Set the image width for desktop, tablet and mobile.
Max Width: Set the image max width for desktop, tablet and mobile.
Height:Set the image height for desktop, tablet and mobile.
Border Type: Choose border type from the dropdown and set it.
Border Radius: Set image border radius for desktop, tablet and mobile.
Hotspot
Typography: Set typography using settings from the dropdown.
Color: Choose a hotspot color.
Box Color: Set a hotspot box color.
Border Color: Add a hotspot border color.
Box Shadow: Choose the needed settings from the dropdown.
Icon Size: Set the icon size for desktop, tablet and mobile.
Icon Spacing: Set the spacing between icon and label.
Border Type: Choose border type from the dropdown and set it.
Min Width: Set hotspot min width for desktop, tablet and mobile.
Min Height: Set hotspot min height for desktop, tablet and mobile.
Padding: Choose paddings for desktop, tablet and mobile.
Border Radius: Set hotspot border radius for desktop, tablet and mobile.
Tooltip
Typography: Set typography using settings from the dropdown.
Color: Choose a tooltip color.
Background Color: Set a tooltip background color.
Box Shadow: Choose the needed settings from the dropdown.
Alignment: Choose a tooltip alignment between left, center, right and justified for desktop, tablet and mobile.
Box Gap: Set a gap between hotspot and tooltip for desktop, tablet and mobile.
Box Width: Set a box width for desktop, tablet and mobile.
Border Type: Choose border type from the dropdown and set it.
Border Radius: Set a box border radius.
Padding: Choose paddings for desktop, tablet and mobile.
Tooltip Button
Typography: Set typography using settings from the dropdown.
Background Color: Set a tooltip button background color.
Text Color: Choose a tooltip button color.
Border Color: Choose a tooltip button border color.
Border Radius: Set a tooltip button border radius for desktop, tablet and mobile.
Text Shadow: Choose the needed settings from the dropdown.
Box Shadow: Choose the needed settings from the dropdown.
Alignment: Choose a tooltip button alignment between left, center, right and justified for desktop, tablet and mobile.
Border Type: Choose border type from the dropdown and set it.
Padding: Set paddings for desktop, tablet and mobile.
Margin: Set margin for desktop, tablet and mobile.
Advanced
Set the Advanced options that are applicable to this widget