Image Hotspot Element

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.

01-desktop-imac-chart.png
Apple Keyboard
Apple iMac
Apple iPhone
Apple Magic Mouse
Business Chart

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.

office-desk.png
Desktop Computer
Office Clock
Office Storage
Green Plant
Book Shelf