Hotspot

The Hotspot element allows users to place interactive markers on an image. Each marker can display additional information through tooltips, making it ideal for showcasing product details, highlighting map points, annotating layouts, or presenting interactive visual storytelling. Tooltips can appear on hover, click, or remain visible at all times, offering flexible engagement options.

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

General Tab

Image

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

Hotspots & Settings

Tooltip Trigger: Options include On Hover, On Click, and Show Always.
Tooltip Animations: Choose between animations such as fade or slide up.
Pulsating Effect: Enable a subtle pulse animation on the hotspot marker.

Hotspot Items: Add Multiple Hotspots

This repeater allows you to create and configure multiple markers on the same image:

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: Choose between a simple TinyMCE editor or a Global Section template for richer tooltip content.

Position

Position X (%): Horizontal position of the hotspot in percentage.
Position Y (%): Vertical position of the hotspot in percentage.
Tooltip Position: Select from Top, Bottom, Left, or Right.

Animation

Marker Animation: Choose an animation style for the marker.
Animation Delay: Set when the animation starts after the page loads or marker becomes visible.

Styles Tab

Image

The Style tab provides controls for adjusting the visual appearance of the main image.

Hotspot Marker

Here you can refine the look of each hotspot marker. Adjustments may include marker size, icon size, spacing, border styling, label typography, and color settings. These controls help you create markers that are clearly visible and fit seamlessly into your design.

Tooltip styling options allow you to shape the overall look and feel of the tooltip container. You can adjust its maximum width, define padding for comfortable spacing, set border radius for rounded styles, control color schemes, refine text appearance, and add shadow effects for depth. This ensures the tooltip remains both visually appealing and easy to read.