Divi Hotspot Doc

The Divi Hotspot Plus plugin allows you to highlight specific areas of an image using interactive hotspots. These hotspots can display icons, text, or images and reveal informative tooltips with animations, helping you draw attention to key details and improve user engagement.

Content

This section is used to create and manage individual hotspots on the image.

Add New Item

Adds a new hotspot to the image. Each hotspot can be positioned and customized independently.

Spot

This toggle defines the visual appearance of the hotspot marker itself.

  1. Spot Type – Choose whether the hotspot appears as an icon, text, or image.
  2. Select Icon – Select an icon to use when the spot type is set to Icon.
  3. Spot Text – Enter text to display when the spot type is set to Text.
  4. Upload Image – Upload an image when the spot type is set to Image.
  5. Image Alt Text – Add alternative text for the uploaded spot image for accessibility and SEO.

Tooltip

This toggle controls the content shown when the hotspot is triggered.

  1. Media Type – Choose whether the tooltip displays no media, an icon, or an image.
  2. Select Icon – Select an icon to display inside the tooltip.
  3. Title – Add a heading title inside the tooltip.
  4. Description – Enter descriptive text to provide additional information.
  5. Use Button – Enable or disable a call-to-action button inside the tooltip.
  6. Button Text – Define the text shown on the tooltip button.
  7. Button Link – Set the URL the button links to.

Settings

This toggle controls the behavior, positioning, and interaction of the hotspot and tooltip.

Spot

These options control how the hotspot itself behaves and where it appears on the image.

  1. Use Animation – Enables animation for the hotspot marker.
  2. Vertical Position – Choose whether the hotspot is positioned from the top or bottom.
  3. Vertical Offset – Adjust the vertical spacing of the hotspot.
  4. Horizontal Position – Choose whether the hotspot is positioned from the left or right.
  5. Horizontal Offset – Adjust the horizontal spacing of the hotspot.

Tooltip

These options control how and when the tooltip appears.

  1. Trigger Event – Choose whether the tooltip opens on mouse hover or mouse click.
  2. Placement – Set the position of the tooltip relative to the hotspot.
  3. Animation – Select the animation effect used when the tooltip appears.
  4. Use Arrow – Enable or disable the arrow pointing from the tooltip to the hotspot.

Image

This section controls the main background image where hotspots are placed.

  1. Upload Image – Upload the main image used for the hotspot layout.
  2. Image Alt Text – Add alternative text for the main image.

Design

The Design section provides styling controls to customize the visual appearance of hotspots and tooltips, ensuring they match your website’s design.

Spot

Controls the appearance of the hotspot marker, including size, color, background, and animations.

Spot Text

Styles the text used in text-based hotspots, including typography, color, and alignment.

Tooltip

Customizes the tooltip container, including background color, borders, padding, and shadow effects.

Tooltip Media

Styles icons or images displayed inside the tooltip, including size and spacing.

Tooltip Texts

Controls typography for tooltip titles and descriptions, such as font size, color, and line height.

Tooltip Button

Styles the tooltip button, including colors, typography, spacing, and hover effects.

Did this answer your question?