Image Hotspot widget allow you to interactive hotspots to the images with tooltip section. You can build different types of image hotspot in different style, using EnterAddons.
Using Image Hotspot Widget :
You can see the below video to get an insight into how you can use the Image Hotspot Widget, Or you can follow the documentation whichever you find convenient.
Firstly, select the Image Hotspot Widget from the menu bar on the left-hand side of your screen and drag and drop it in the selected area.
Step1
Secondly, from ‘Content’ section you will get Image Hotspot Content section.
After that, from Image Hotspot Content section, you can add background-image, tooltip-type ( hover / click ) options.
Moreover, you can add “Hotspot List” item with clicking “ADD ITEM” button and remove each item with clicking with “X” button, and that is given below.
Step2
From ‘Style’ section you can stylize the widget. You will get the Wrapper, Hotspot Style, Tooltip Area Style, Tooltip Image, Tooltip Title and Tooltip Description section respectively.
After that, from Wrapper section you can add wrapper-width, wrapper-height, margin, padding, border-type, border-radius respectively, and that is given below.
Then, from Hotspot Style section you can add hotspot-width, hotspot-height, border-type, border-radius, background-type respectively, and that is given below.
Then, from Tooltip Area Style section you can add tooltip-area-width, tooltip-area-height, offset-x, offset-y, border-type, box-shadow, border-radius respectively, and that is given below.
After that, from Tooltip Image section you can add image-width, image-height, margin, padding, border-type, border-radius and background-type respectively.
Step3
Finally, after finishing all the editing, click update, and then click on ‘Preview > Preview in new tab’ to see your work live.
That’s it.