Image Hotspot

Highlight important points on your images with hotspots and add
some information about them using tooltips

Highlight Important Points Using Hotspots

Elegant Elements includes an Image Hotspot Element to allow you to highlight important points on your images
with hotspots and display some additional information with tooltips on hotspot. You can also control
the hotspot styling and tooltip styling. Set the hotspot pointers as many as you need.

Pulse Effect

Image Hotspot element comes with two effects for the hotspot pointer. Pulse and Sonar. This is pulse effect. You can customize everything –

Hotspot Image

Upload the image to be displayed hotspot locations on

Hotspot Size

Controls the font size of the hotspot pointer text. This also controls the pointer background based on the text size.

Hotspot Text Color

Controls the text or icon color of the hotspot pointer

Hotspot Background Color

The background color of the hotspot pointer. You can also set the background hover color to be different.

Pointer Effect

The animation effect for the hotspot pointer. Pulse or Sonar.

Sonar Effect

Image Hotspot element comes with two effects for the hotspot pointer. Pulse and Sonar. This is sonar effect. Individual hotspot options –

Tooltip Title

Enter title for this hotspot item to be displayed when hover

Hotspot Pointer Position – Left

Select the left position of the hotspot pointer on image. ( In % )

Hotspot Pointer Position – Top

Select the top position of the hotspot pointer on image. ( In % )

Pointer Type

Choose whether you want to display the pointer index or FontAwesome icon for the hotspot placeholder

Tooltip Position

Controls the tooltip appearing position. You can choose from left/top/right/bottom options