popover
Turns an element into a layer that pops up over the page — without JavaScript.
Syntax
<button popovertarget="tip">?</button>
<div id="tip" popover>…</div>Parameters
| Parameter | Type | Description |
|---|---|---|
| popover | auto | manual | hint | `auto` closes on an outside click and Esc, `manual` only explicitly. |
| popovertarget | id | On a button: which element to open. |
| popovertargetaction | toggle | show | hide | Optional. What the button does. |
Examples
A tip opened by a button:
<button popovertarget="tip">What is a flat white?</button>
<div id="tip" popover>
<p>Espresso with a thin layer of velvety milk.</p>
</div>Custom styling and a close button:
<style>
[popover] { border: none; border-radius: 10px; padding: 16px; box-shadow: 0 4px 20px rgb(0 0 0 / 0.3); }
</style>
<button popovertarget="menu">Open menu</button>
<div id="menu" popover>
<p>Espresso · Latte · Mocha</p>
<button popovertarget="menu" popovertargetaction="hide">Close</button>
</div>Notes
The popover is shown in the top layer — above everything else, regardless of z-index. By default it sits in the centre of the screen; CSS anchor positioning can attach it to the button. Supported by all modern browsers since 2024.
See also
- <dialog> — A dialog box; a modal one is opened with `showModal()` and blocks the rest of the page.
- <details>, <summary> — A disclosure block without JavaScript: `<summary>` is the visible title, the rest is hidden until clicked.
- <button> — A button: submits a form or triggers an action.
- position-anchor — Chooses the default anchor for an absolutely or fixed positioned element; `position-area` and `anchor()` then measure from it.
Related recipes
In the tutorial
- Disclosure widgets and dialogs — The details and summary tags, an accordion, the dialog modal window, closing with form method=dialog and popover blocks.