The hotspot image widget allows you to display your data on your images using its overlay hotspots functionality.The overlay will allow you to put information text anywhere on your images, and you can style everything from the hotspot markers to the tooltip text.
Here is how you can implement this widget in your web pages.
The items content section is where you will set up your hotspots tooltip text.You can add a new hotspot to the list by clicking on the add item at the bottom of this section.Here are the options available for each item.
Under the styling tab section, you will have the full control over the styling & design of all you interactive icon box widget elements, you can change the sizes, colors, backgrounds...
Customize the text properties for the heading & short description text.
-Typography: Change the font size, letter spacing... choose from hundreds of Google font families.
-Colors : Customize the color of your text elements to create stylish tootips.
Change the layout for the displayed tooltip and color for the background..
-Content Align : Align the tooltip content text.The options avaialable are left, center, and right.
-Tooltip Background : Customize the color for the background.Keep in mind that the tooltip background will contrast with the image.
-Tooltip Show Effect : Choose if if you want the tooltip to be displayed when user hover overs the hotspot marker or when the user clicks instead.
-Include Tooltip Triangle : Enable this if you want to use a triangle on your tooltip.This triangle will be displayed at the edge of the tooltip and will be pointed at the hotspot marker.
-Enable Box Shadow : Enable this if want to use a shadow effect for your tooltip.
Style everything about the hotspot marker.
-Color : Change the color for both the inside content of the marker and the background.
-Marker Style : Choose one of the multiple marker styles available.You can use numbers or alphabet letters as marker or simply use a combination of colors or even a single color style.
-Marker Size & Rounded : Change the marker size and enable the rounded marker option if you want a rounded shape instead of a square one.
-Marker Animation : Choose an animation for the marker.This animation will be applied on all the markers and will give your hotspot widget extra design.Note that this animation will be repeated on a fixed amount of time.
-Marker Show Animation : Choose an animation for the first display of the marker.This animation will also be applied on all the markers but will only be displayed when the widget is loaded on your web page and will not be repeated.Note that the appearance order for the markers is based on the order of the items in the content section
If you can't find what you are looking for any our documentation website, please feel free to open a support ticket & get help from our support team.