Image hotspot allows highlighting specific sections with markers and pointers. Markers can be put on different sections of the image. Pointers can display information about the markers. UAE』s Hotspot widget allows stunning options to display nice image hotspot. Below are the key features –
Set background image and adjust its opacityDifferent Marker types – Icon, Text, ImageOption to add link to each MarkerGlobal and Individual styling for Markers with Glow EffectDifferent customization options for Tooltip ( Position, Arrow, Animation )Innovative Hotspot tour functionality
background image
Set an image on which you can put markers and highlight the sections. Under Content > Image, set image and its size. Opacity can be managed under Style > Image.
Markers ( Icon, Text, Image )
With Markers, you can pinpoint the specific section on the image and then add a description about it with Tooltip. Under the Markers tab, you can add a number of markers. Each marker has following settings –
General Marker Type: Choose marker type as an icon, text or image.Position: Choose a location for the marker with Horizontal position (%) and Vertical position (%) ContentTooltip Content: TinyMCE editor allows adding content that will display in the Tooltip for each marker. More options are available under Tooltip tab.Marker Link: You can add link to each marker.StyleOverride Global Settings: Global styling can be set under Style > Marker. This global style can be overridden for individual marker.
Tooltip
Tooltip is a small content window that will appear when hover over the marker or click on the marker. Tooltip content can be added for each marker from Markers > Marker name > Content. Tooltip can be customized with following options –
Position: Tooltip position can be set with respect to the marker.Display on: Display tooltip on hover or click of the marker.Arrow: Set content window arrow positionDistance: Set distance between marker and tooltip.Animation Type: Animations will be applied to tooltip content boxAdvanced Settings: Animation DurationMax Height: If the tooltip content is large use this option. Read How Max Height Option Works?Z-Index: In case tooltip is displaying beneath another section increase z-index value.
Hotspot Tour
This is attractive and innovative feature. It allows taking a tour to all markers based on their order. Refer article to see How Hotspot Tour works?
Style for the Marker and Tooltip
All styling options are available under Style Tab.Glow Effect option is present under Style > Marker.
Related Documents –1. Styling a Marker in Hotspot Widget2. Unable to Access the URL assigned to Marker?3. How Max Height Option Works?4. Unable to Click on Markers when Hotspot Tour Option is Enabled?