Popover
Progressive-enhancement patterns using the native Popover API, with no JavaScript required for basic toggling and light dismiss.
The trigger declares the entire relationship
Popover API attributes provide toggling, Escape dismissal, and light dismiss without application JavaScript.
<button type="button" popovertarget="project-actions">
Project actions
</button>
<div id="project-actions" popover>
<h2>Project actions</h2>
<button type="button">Duplicate</button>
<button type="button">Archive</button>
</div>More examples
Each example introduces a different part of the shipped API.
Auto, manual, and hint modes express lifecycle
Choose behavior in markup; do not simulate a modal by styling an ordinary popover.
<div popover="auto" id="menu">Light-dismiss menu</div>
<div popover="manual" id="teaching-ui">Persistent teaching UI</div>
<div popover="hint" id="hint">Nonessential hint</div>Light dismiss
Explicit control
Nonessential hint
The native Popover API handles top-layer placement, Escape dismissal, and light dismiss. CSS Tags styles any element with the popover attribute.
Native popover
Open it, press Escape, or click outside to dismiss.
<button type="button" popovertarget="account-popover">Account details</button>
<div id="account-popover" popover="auto">
<layout-stack gap="var(--space-sm)">
<strong>Signed in as Ada</strong>
<span class="example-muted">
<a href="mailto:ada@example.com">ada@example.com</a>
</span>
<button type="button" popovertarget="account-popover" popovertargetaction="hide">Close</button>
</layout-stack>
</div><button type="button" popovertarget="account-popover"> Account details</button>
<div id="account-popover" popover="auto"> <strong>Signed in as Ada</strong> <p>ada@example.com</p> <button type="button" popovertarget="account-popover" popovertargetaction="hide" > Close </button></div>Choosing a popover mode
| Value | Behavior | Typical use |
|---|---|---|
popover or popover="auto" | Light dismiss and one auto popover at a time | Menus and account panels |
popover="manual" | Opens and closes only when explicitly requested | Persistent teaching UI |
popover="hint" | Hint-style relationship where supported | Nonessential hover/focus hints |
Popover content is non-modal: it does not make the rest of the page inert or trap focus. Use a native <dialog> when the user must respond before continuing.
Theme tokens
[popover] { --b-bg: var(--surface-default); --b-bc: var(--outline-default); --b-bw: 1px; --b-r: var(--radius-lg); --b-p: var(--space-lg); --popover-max-width: 24rem; --popover-max-height: 32rem;}Popovers are centered in the top layer by default, which remains reliable when anchor positioning is unavailable. Add data-scrim when the popover benefits from a dimmed backdrop; ordinary non-modal popovers keep the page unobscured.
Progressive enhancement
The trigger and popover attributes provide the behavior without application JavaScript in supporting browsers. If older browsers are in scope, keep essential actions available elsewhere or load a focused Popover API polyfill. Do not hide critical navigation exclusively inside an unsupported popover.
Accessibility checklist
- Use a real
<button>as the trigger. - Give icon-only triggers an accessible name.
- Keep focusable controls in a logical DOM order.
- Use menu roles only when you also implement the complete keyboard interaction expected of an application menu.