Anchor notes

The idea

A photograph can hold more than one story. Three markers reveal notes about light, composition and scale. Move the markers with the slider: an open note follows its anchor.

Two browser features, working together

The Popover API puts the note in the browser's top layer, above clipping containers. A native button opens it; Escape or a click outside dismisses it. CSS anchor positioning places the note relative to its marker, with a fallback position when space runs out.

<button popovertarget="ridge" style="anchor-name: --ridge">  01</button><div id="ridge" popover style="position-anchor: --ridge">  The ridge gives the eye a quiet place to land.</div>

[popover] {  position: fixed;  inset: auto;  position-area: top;  position-try-fallbacks: flip-block, flip-inline;  margin: 12px;}

Try this

Open a note, then shift the markers. Resize the window and open the marker near the top. The browser decides where the note fits; there is no JavaScript measuring loop.

Support and accessibility

Markers are real buttons with descriptive names. The native popover supports light dismissal and Escape. Where anchor positioning is missing, the note opens in the centre. Where popovers are missing, a simple toggle and close button keep notes available.

This is a useful pattern for annotations, contextual help and compact menus. Keep important information in the document rather than hiding everything in popovers.

Further reading

• Using the Popover API — MDN
• CSS position-area — MDN