Image hotspots let you add interactive points on an image, each revealing additional content, such as text, audio, or an external link, when clicked. This makes it easy to surface layered information within a single image.

Adding an image hotspot content block

1. Click the + button on the canvas, or type /image hotspot, then select Image hotspot from the menu. An empty image hotspot block will be added to your story.
2. Upload an image
3. Once the block is added, click Upload image to load your image into the block.

Customising the image hotspot content block

Change the container width

Click the gear icon at the top right corner of the block to open the settings panel, then adjust the width:

• Contained: The block will match the width of your text content.

• Full-width: The block will span the full width of the browser.

• Custom: Set a preferred width and alignment.

Working with hotspots

Adding a hotspot

Click anywhere on the image to place a hotspot. A settings panel will open on the right.

Moving a hotspot

Click and hold the hotspot pin, then drag it to a new position. The tooltip or content panel will follow.

Deleting a hotspot

In the hotspot settings panel, click Delete to remove the hotspot from the image.

Changing the content type

In the content settings panel, choose a content type for the hotspot:

• Information — Displays a rich-text content area (tooltip, side pane, or dialog box).

• Audio — Plays an audio file when the hotspot is clicked.

• External link — Redirects the reader to a URL when the link icon is clicked.

Changing the content area style

For hotspots set to Information, you can choose how the content is displayed:

• Tooltip — A small pop-up that appears on the image.

• Side pane — A panel that slides in from the side.

• Dialog box — A modal overlay that appears over the image.

✨ Note that content may not be automatically transferred when you switch between content area types, so configure your content area before adding text or media.

Changing the background colour of the content area

In the content settings panel, change the background colour using the colour picker.

Changing the stroke colour of the content area 

In the content settings panel, change the stroke colour. This applies the colour to the border of the dialog box.

Applying styling to all hotspots of the same type

In the content settings panel, click Apply styling to all [content area type] to apply the current style settings to all hotspots sharing the same content area type.

Customising the hotspot icon style

Change the icon style

In the icon settings panel, select a different icon style from the available options.

Change the icon background colour

In the icon settings panel, use the colour picker to update the hotspot's background colour.

Change the animation

In the icon settings panel, select a different animation style for the hotspot.

Upload a custom icon

In the icon settings panel, click Icon style and select Upload custom icon. To replace an existing custom icon, click Upload again with a new image file.

Turn on or off the center zoom effect (tooltip only)

In the icon settings panel, toggle the Center zoom effect switch on or off. When enabled, the image will zoom in to the hotspot's position when clicked.

Configuring the side pane content area

Change the side pane position

In the content settings panel, select Side pane as the content area, then choose whether the pane appears on the left or right.

Change the side pane width

In the content settings panel, select Side pane and adjust the width input to make the panel narrower or wider.

Change the side pane padding

In the content settings panel, select Side pane and adjust the padding input to increase or decrease the internal spacing.

Adding content inside a hotspot's content area

Add a content block inside the content area

With the hotspot's content editor open, add content blocks as you would in the main story builder. You can add text, images, and more.

Rearrange content blocks inside the content area

In the content editor, use the = handle on any content block to move it up or down.

Delete a content block inside the content area

In the content editor, click = on the block and select Delete, or press Backspace.

Duplicate a content block inside the content area

In the content editor, click = on the block and select Duplicate.

Adding audio or an external link

Add audio to a hotspot

In the content settings panel, select Audio, then upload an audio file. The audio will play when the hotspot is clicked.

Add an external link to a hotspot

In the content settings panel, select External link, then fill in the URL. Readers will be redirected to the link when they click the hotspot's link icon.

Keyboard navigation

Lapis supports keyboard navigation for image hotspot blocks.

✨ Keyboard navigation improves accessibility for authors working without a mouse.

Previewing image hotspot content block

Preview your image hotspot block

Click Preview at the top right of the story builder to see how the image hotspot will appear to readers.

Lapis is built by Kontinentalist↗, a data storytelling studio in Singapore.