Interactive Popovers

Place interactive markers, often called hotspots, over an image and reveal additional content in a popover. Use them to highlight product features, annotate diagrams, or add context to complex visuals without crowding the layout.

Position each marker precisely and choose whether its popover opens on click or hover. Popovers can appear above, below, to the left or to the right of the hotspot and automatically flip when needed to remain within the viewport. Choose a light or dark marker for clear contrast against the background.

For immersive hero sections and balanced column layouts, the image can fill the available column space or extend to the viewport height. The header height can be subtracted so the image perfectly fits within the viewport.

Add a title, meta text, description, image and link to each popover. Adjust the card width and padding, choose a default, primary or secondary style, and link individual content fields or the complete popover.

You can also replace the image with a background video to add interactive hotspots and contextual information to moving visuals.

Accessible labels help screen readers identify the markers, while keyboard navigation lets users open and close popovers without a mouse.