Skip to content
StoreDocsSupport
Get Divi Torque

Hotspots

The Hotspots module places interactive spots on an image. Visitors hover over a spot or click it to see a tooltip. Use it for product callouts, maps, floor plans or any image where areas need a short explanation.

Content Tab

Image (module)

  • Upload Image: The base image for the hotspots.
  • Image Alt Text: The alt text for the image.

Hotspot (each item)

Add one Hotspot for each spot. Each hotspot has these groups.

Spot

  • Spot Type: Icon, Text or Image. Icon is the default.
  • Select Icon, Upload Image, Image Alt Text or Spot Text: The content of the spot, depending on Spot Type.

Tooltip

  • Media Type: None, Icon or Image. Adds a small icon or image to the tooltip.
  • Select Icon or Upload Image and Image Alt Text: The tooltip media, depending on Media Type.
  • Title: The tooltip title.
  • Description: The tooltip description.
  • Use Button: Adds a button to the tooltip. Off by default. Set the Button Text and the button link. This is the way to link a hotspot.

Settings

  • Vertical Position: Top or Bottom. Vertical Offset sets the distance from that edge. Default is 40%.
  • Horizontal Position: Left or Right. Horizontal Offset sets the distance from that edge. Default is 40%.
  • Trigger Event: Mouse Hover or Mouse Click. Mouse Hover is the default.
  • Placement: Where the tooltip opens relative to the spot: Top, Bottom, Left or Right. Default is Bottom.
  • Animation: How the tooltip appears: Fade, Scale, Perspective, Shift Away or Shift Toward.
  • Use Arrow: Shows an arrow on the tooltip. Off by default.
  • Use Animation: Adds an animated wave around the spot. Off by default.

Design Tab

Design options are on the module, so they apply to every hotspot. Each Hotspot has the same groups, so you can override one spot.

  • Spot: Height, Width, Icon Color, Icon/Image Size and Spot Background. Animated Wave Color and Wave Border Radius style the wave when Use Animation is on.
  • Spot Text: Font styling for text spots.
  • Tooltip: Content Alignment, Width, Padding, Arrow Color and Tooltip Background.
  • Tooltip Media: Icon Color, Icon/Image Size, Height, Width, Padding and Media Background.
  • Tooltip Title Text and Tooltip Description Text: Font styling and the space above each.
  • Tooltip Button: Divi's button options and the space above the button.