Hotspot

The Hotspot element allows you to place interactive markers directly on an image. Users can hover or click on these spots to reveal tooltips containing additional information, images, links, or even rich content from global section templates. This makes it a powerful tool for product showcases, infographics, room or layout exploration, and educational visualizations.

See an example of this element in action: https://codex-themes.com/thegem/hotspot/

Content Tab

Image

  • Choose Image: Select the main image from the media library.
  • Image Size: Choose display resolution (Full, Large, Medium, etc.)

Hotspots & Settings

  • Tooltip Trigger: Choose how tooltips are activated — On Hover, On Click, or Always Visible.
  • Tooltip Animation: Select the tooltip animation style (e.g., fade, slide up).
  • Pulsating Effect: Enable a subtle pulsating animation on the hotspot marker to draw attention.

Repeater: Add Multiple Hotspots

This element allows you to create and configure multiple markers on the same image. Each hotspot consists of two sections - Content and Position:

Content

  • Hotspot Title: The internal or visible title of the marker.
  • Link: Optional link added to the hotspot.
  • Icon: Choose an icon for the marker display.

  • Label: Add a small label next to or inside the marker.

    Tooltip Content Type:

    Select the format for the tooltip content:

    • Simple TinyMCE editor for text and basic formatting
    • Global Section template for advanced, rich-content tooltips

Position

  • Position X (%): Horizontal position of the hotspot in percentage.
  • Position Y (%): Vertical position of the hotspot in percentage.
  • Tooltip Position: Placement of the tooltip relative to the marker — Top, Bottom, Left, or Right.
  • Marker Animation: Choose an animation style for the marker.
  • Animation Delay: Set when the animation starts after the page loads or marker becomes visible.

Style Tab

Image

The Style tab includes options to customize the visual presentation of the main image.

Hotspot Marker

Here you can refine the appearance of the marker itself, including its size, the size and spacing of its icon, border presentation, and label styling. You can also adjust colors, typography, and general visual settings to match your site’s design language.

Tooltip

The tooltip styling section provides controls for shaping its visual form and readability. You can define its maximum width, adjust padding to create balanced spacing, and customize radius, shadows, and color schemes. Text styling options ensure the tooltip content blends seamlessly with the overall theme while remaining clear and accessible.