Hotspot Widget

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 opacity
• Different Marker types – Icon, Text, Image
• Option to add link to each Marker
• Global and Individual styling for Markers with Glow Effect
• Different 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 (%)
• Content
  • Tooltip 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.
• Style
  • Override 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 position
• Distance: Set distance between marker and tooltip.
• Animation Type: Animations will be applied to tooltip content box
• Advanced Settings:
  • Animation Duration
  • Max 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 Widget
2. 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?