Image Hotspot

Estimated reading: 7 minutes 322 views

An Image Hotspot is like a special widget for images that lets you add hidden information. It’s like having small notes or messages attached to different parts of the image. When you move your mouse over these messages or click on them, they pop up and show you more details.

This widget is really versatile. You can decide how these messages appear, like when you move your mouse over them or when you click on them. You can also make them look better by adding icons or images to them.

You can use images, icons, or even Lottie as markers, and they can have cool animations, too. You can even put buttons on the tooltip that you can click on to do something, and if you want to hide the tooltip, you can add a “close” button. It’s a stylish and useful way to share extra information with people using pictures.

The Image Hotspot widget features the following controls.

Content

General

  • Image: Upload the image.
  • Image Size: Select the image size.
Image Hotspot: General Settings
Image Hotspot: General Settings

Markers

Content

  • Admin Label: Enter the label.
  • Icon Type: Choose from Icon, Lottie, or Image.
  • Text: Enter the text.
  • Vertical Position: Enter the vertical position.
  • Horizontal Position: Enter the horizontal position.
Image Hotspot: Marker Content Settings
Image Hotspot: Marker Content Settings

Tooltip

  • Preview: Enable the option to preview the tooltip in editor mode.
  • Icon Type: Choose from Image or Icon.
  • Heading: Enter the heading of tooltip.
  • Short Description: Enter the short description of tooltip.
  • Description: Enter the description of tooltip.
Image Hotspot: Tooltip Settings
Image Hotspot: Tooltip Settings
  • Enable Button: Activate the option to display the button in tooltip.
    • Text: Enter the button text.
    • Link: Enter the URL to link with button.
    • Icon: Select the icon for button.
    • Icon Position: Choose icon position from Before or After the text.
Image Hotspot: Button Settings
Image Hotspot: Button Settings

Style(for individual item)

Marker

  • Text Color: Select the text color of marker.
  • Background Type: Select from classic or gradient.
  • Border Type: Select the border type.
  • Box Shadow: Set the box shadow.
Image Hotspot: Marker Style Settings
Image Hotspot: Marker Style Settings

Tooltip

  • Background Type: Select from classic or gradient.
  • Arrow Color: Select the color of tooltip arrow.
Image Hotspot: Tooltip Style Settings
Image Hotspot: Tooltip Style Settings

Content Background

  • Background Type: Select from classic or gradient.
Image Hotspot: Background Style Settings
Image Hotspot: Background Style Settings

Heading

  • Text Color: Select the text color of heading.
  • Background Type: Select from classic or gradient.
Image Hotspot: Heading Style Settings
Image Hotspot: Heading Style Settings

Short Description

  • Text Color: Select the text color of short description.
  • Typography: Set the typography.
  • Background Type: Select from classic or gradient.
Image Hotspot: Short Description Style Settings
Image Hotspot: Short Description Style Settings

Description

  • Text Color: Select the text color of description.
  • Background Type: Select from classic or gradient.
Image Hotspot: Description Style Settings
Image Hotspot: Description Style Settings

Note: When you choose ‘hover‘ as the Trigger option, the button, close button, and Hotspot tour in the tooltip won’t work.

  • Trigger: Select the trigger option from Hover or Click.
  • Enable Close Button: Select the option to display the close button.
    • Icon: Select the close button icon.
  • Enable Hotspot Tour: Select the option to display the Hotspot tour.
Image Hotspot: General Settings
Image Hotspot: General Settings

Hotspot Tour

Note: These options are only applicable when the Hotspot Tour option is enabled.

Previous Tour

  • Text: Enter the text of previous tour.
  • Icon: Select the icon of previous tour.

Next Tour

  • Text: Enter the text of next tour.
  • Icon: Select the icon of next tour.

End Tour

  • Text: Enter the text of end tour.
  • Enable Count: Enable the option to display count.
Image Hotspot: Hotspot Tour Settings
Image Hotspot: Hotspot Tour Settings

Style

Marker

  • Icon Gap: Specify the gap between marker’s text and icon.
  • Icon Position: Select position from left or right.
  • Color: Select the color of text.
  • Text Typography: Set the typography.
  • Text Shadow: Set the text shadow.
  • Background Type: Select from classic or gradient.
  • Box Shadow: Set the box shadow.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
Image Hotspot: Marker Style Settings
Image Hotspot: Marker Style Settings

Icon

Normal

  • Primary Color: Select the primary color of icon.
  • Secondary Color: Select the secondary color of icon.

Hover

Styling controls for hover state are under this section. This will be applied when someone hovers the icon.

  • Size: Specify the size of icon.
  • Padding: Set the padding.
  • Rotate: Set the rotation.
  • Border Width: Specify the width of border.
  • Border Radius: Set the border radius.
Image Hotspot: Icon Style Settings
Image Hotspot: Icon Style Settings

Animation

  • Animation: Select the animation of markers.
Image Hotspot: Icon Animation Style Settings
Image Hotspot: Icon Animation Style Settings

Tooltip

  • Preview Tooltip: Enable the option to preview the tooltip in editor.
  • Background Type: Choose from classic or gradient.
  • Arrow Color: Select the arrow color.
  • Width: Specify the width.
  • Box Shadow: Set the box shadow.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
Image Hotspot: Tooltip Style Settings
Image Hotspot: Tooltip Style Settings

Image/Icon

  • Position: Select position from left, right, or top.
  • Alignment: Select alignment from start, center, or end.
  • Gap: Specify the gap between icon and text.
Image Hotspot: Image/Icon Style Settings
Image Hotspot: Image/Icon Style Settings

Normal

  • Primary Color: Select the primary color of icon.
  • Secondary Color: Select the secondary color of icon.

Hover

Styling controls for the hover state are under this section. This will be applied when someone hovers the icon.

  • Size: Specify the size of icon.
  • Padding: Set the padding.
  • Rotate: Set the rotation.
  • Border Width: Specify the width of border.
  • Border Radius: Set the border radius.
Image Hotspot: Tooltip Icon Style Settings
Image Hotspot: Tooltip Icon Style Settings

Content

  • Text Alignment: Select the text alignment from left, center, or right.
  • Background Type: Choose from Classic or Gradient.
  • Gap: Specify the gap between content.
  • Padding: Set the padding.
Image Hotspot: Content Style Settings
Image Hotspot: Content Style Settings

Heading

  • Typography: Set the typography.
  • Color: Select the color of heading.
  • Background Type: Choose from Classic or Gradient.

Short Description

  • Typography: Set the typography.
  • Color: Select the color of short description.
  • Background Type: Choose from Classic or Gradient.

Description

  • Typography: Set the typography.
  • Color: Select the color of description.
  • Background Type: Choose from Classic or Gradient.
Image Hotspot: Content Style Settings
Image Hotspot: Content Style Settings

Button

  • Alignment: Select the button alignment from left, center, or right.
  • Gap: Specify the gap between button and text.
  • Text Color: Select the text color of button.
  • Typography: Set the typography.
  • Background Type: Choose from Classic or Gradient.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
Image Hotspot: Button Style Settings
Image Hotspot: Button Style Settings

Button Icon

  • Size: Specify the size of button icon.
  • Color: Select the color of icon.
Image Hotspot: Button Icon Style Settings
Image Hotspot: Button Icon Style Settings

Animation

  • Animation: Select the animation of tooltips.
    • Duration: Enter the duration of animation.
Image Hotspot: Button Icon Animation Style Settings
Image Hotspot: Button Icon Animation Style Settings

Hotspot Tour

Note: These options are only applicable when the Hotspot Tour option is enabled.

  • Background Type: Choose from Classic or Gradient.
  • Box Shadow: Set the box shadow.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
  • Margin: Set the margin.
Image Hotspot: Hotspot Tour Style Settings
Image Hotspot: Hotspot Tour Style Settings

Count

  • Gap: Specify the gap between count and other content.
  • Color: Select the color of count.
  • Typography: Set the typography.
Image Hotspot: Hotspot Tour Count Style Settings
Image Hotspot: Hotspot Tour Count Style Settings

Next Tour

  • Color: Select the color of next tour.
  • Typography: Set the typography.
  • Gap: Specify the gap between next tour and other content.
  • Alignment: Select the alignment of next tour.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
Image Hotspot: Hotspot Tour Style Settings(Next Tour)
Image Hotspot: Hotspot Tour Style Settings(Next Tour)

Previous Tour

  • Color: Select the color of previous tour.
  • Typography: Set the typography.
  • Background Type: Choose from Classic or gradient.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
Image Hotspot: Hotspot Tour Style Settings(Previous Tour)
Image Hotspot: Hotspot Tour Style Settings(Previous Tour)

End Tour

  • Color: Select the color of end tour.
  • Typography: Set the typography.
  • Background Type: Choose from Classic or gradient.
  • Gap: Specify the gap between end tour and other content.
  • Text Alignment: Select the alignment from left, center, or right.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
Image Hotspot: Hotspot Tour Style Settings(End Tour)
Image Hotspot: Hotspot Tour Style Settings(End Tour)

Close Button

Note: These options are only applicable when the Close Button option is enabled.

  • Horizontal Position: Select the horizontal position of close button.
  • Vertical Position: Select the vertical position of close button.
  • Size: Specify the size of close button icon.
  • Color: Select the color of close button.
Image Hotspot: Close Button Style Settings
Image Hotspot: Close Button Style Settings

Check out the Demo page of Image Hotspot.

Share this Doc

Image Hotspot

Or copy link

CONTENTS