Add and position hotspots

Follow these steps

1. 1

   Create a marker

   PropertiesHotspot labels

   Select an image and use Add Label in Hotspot labels. A new marker starts in the center. For a standalone marker, use an Elements > Interaction preset.

2. 2

   Position the point

   PropertiesHotspot labels

   Set X and Y positions as percentages to align the marker with its subject. After reframing or resizing the image, check that the point still indicates the intended detail.

3. 3

   Style the marker

   PropertiesHotspot labels

   Choose size, color, circle/square style, icon, and pulse animation. Enter a title and short description. Choosing an icon does not configure its associated content.

   With several hotspot blocks selected, the tooltip, colour, size, style and icon settings apply to all of them and undo in one step.

4. 4

   Attach content and tooltip

   PropertiesContent type

   Select a content type and fill in its fields. The optional tooltip label is a short hint; toggle its visibility after entering text. The opened card’s title and content are configured separately.

   In the reader the tooltip opens on hover; it is not cut off even on a small block, and long text wraps. Tooltips do not open in the editor.

5. 5

   Check removal and accessibility

   PropertiesSource image

   Remove unwanted markers without deleting the source image. In accessible authoring, describe the source and meaningful images opened by its markers. Test opening and closing each marker in preview.

Related lessons

• Interactive blocks
• Configure hotspot content
• Add buttons and links