## Declarative popovers Add the `popover` attribute to any element to make it a popover. Use `popovertarget="id"` on a button to wire up open/close — no JavaScript required. ## auto vs manual `popover` (or `popover="auto"`) gets light-dismiss: clicking outside or pressing ESC closes it. `popover="manual"` opts out — you control dismissal yourself. Useful for persistent panels. ## Anchor positioning Combine with the anchor positioning API (`anchor-name` / `position-anchor`) to attach a popover to an exact element without measuring positions in JS. ::example{slug="popover-target" title="Popover with popovertarget" difficulty=intro language=combined} ```html

Details

Click outside or press ESC to dismiss.

``` ```css body { font-family: system-ui, sans-serif; background: #1a1610; color: #f4ecd8; padding: 24px; } button { font: inherit; padding: 8px 14px; border: 0; border-radius: 4px; background: #e9b454; color: #1a1610; cursor: pointer; } [popover] { background: #0f0d09; color: #f4ecd8; border: 1px solid #2a2218; border-radius: 8px; padding: 16px 20px; max-width: 320px; } [popover]::backdrop { background: transparent; } ``` ```explain The `[popover]` element starts hidden; clicking the button — wired only by `popovertarget="info"`, no JS — opens it in the top layer. Because the default is `popover="auto"`, clicking outside or pressing ESC dismisses it for free. ``` :: ## More patterns The blocks below contrast `auto` against `manual` dismissal, build a real menu with `popovertarget`, and listen for the `toggle` event in JavaScript to react when a popover opens or closes. ::example{slug="popover-auto-vs-manual" title="auto light-dismiss vs manual" difficulty=working language=combined} ```html

popover="auto"

Click outside or press ESC and I close myself.

popover="manual"

Outside clicks and ESC do nothing — you must use my button.

``` ```css body { font-family: system-ui, sans-serif; background: #1a1610; color: #f4ecd8; padding: 24px; } .row { display: flex; gap: 10px; flex-wrap: wrap; } button { font: inherit; padding: 8px 14px; border: 0; border-radius: 4px; background: #e9b454; color: #1a1610; cursor: pointer; } [popover] { background: #0f0d09; color: #f4ecd8; border: 1px solid #2a2218; border-radius: 8px; padding: 16px 20px; max-width: 320px; } [popover] strong { color: #e9b454; } [popover] p { margin: 8px 0 12px; } [popover]::backdrop { background: rgba(0, 0, 0, 0.35); } ``` ```explain Two popovers render identically, but only the `auto` one closes on an outside click or ESC; the `manual` one ignores both and must be dismissed through its own `popovertargetaction="hide"` button. The visible darkened `::backdrop` confirms each popover is in the top layer. ``` :: ::example{slug="popover-menu" title="A popover menu via popovertarget" difficulty=working language=combined} ```html ``` ```css body { font-family: system-ui, sans-serif; background: #1a1610; color: #f4ecd8; padding: 24px; } #trigger { font: inherit; padding: 8px 14px; border: 0; border-radius: 4px; background: #e9b454; color: #1a1610; cursor: pointer; } [popover] { margin: 0; padding: 6px; min-width: 180px; background: #0f0d09; border: 1px solid #2a2218; border-radius: 8px; } [popover] button { display: block; width: 100%; text-align: left; font: inherit; padding: 8px 12px; border: 0; border-radius: 4px; background: transparent; color: #f4ecd8; cursor: pointer; } [popover] button:hover { background: #2a2218; color: #e9b454; } [popover]::backdrop { background: transparent; } ``` ```explain The trigger opens a styled menu of three `popovertarget="menu"` buttons, each carrying `popovertargetaction="hide"` so selecting one closes the menu — a working dropdown with no JavaScript. Light-dismiss (`popover="auto"`) means clicking elsewhere also closes it. ``` :: ::example{slug="popover-toggle-event" title="React to the toggle event in JS" difficulty=advanced language=combined} ```html

Open and close me — the log below records each transition.

``` ```css body { font-family: system-ui, sans-serif; background: #1a1610; color: #f4ecd8; padding: 24px; } button { font: inherit; padding: 8px 14px; border: 0; border-radius: 4px; background: #e9b454; color: #1a1610; cursor: pointer; } [popover] { background: #0f0d09; color: #f4ecd8; border: 1px solid #2a2218; border-radius: 8px; padding: 16px 20px; max-width: 340px; } [popover]::backdrop { background: transparent; } #log { margin-top: 16px; padding-left: 18px; font-family: ui-monospace, monospace; font-size: 13px; color: #c9bfa6; } #log li::marker { color: #e9b454; } ``` ```js const panel = document.getElementById('panel') const log = document.getElementById('log') // `beforetoggle` fires before the state flips; `toggle` after. panel.addEventListener('beforetoggle', (event) => { if (event.newState === 'open') { log.insertAdjacentHTML('beforeend', '

about to open…

') } }) panel.addEventListener('toggle', (event) => { log.insertAdjacentHTML('beforeend', `

now ${event.newState} (was ${event.oldState})

`) }) ``` ```explain On load only the button and an empty `#log` list show; each open/close appends entries like `about to open…` and `now open (was closed)`, proving `beforetoggle` fires before the state flips and `toggle` after, with `event.newState`/`oldState` exposing both sides of the transition. ``` ::