Native popover API

Tooltips, menus, and disclosures — no JS

Shipped 2024 across Chrome / Safari / Firefox:

<button popovertarget="my-popover">Open</button>

<div id="my-popover" popover>
  <p>This is a popover.</p>
  <button popovertarget="my-popover" popovertargetaction="hide">Close</button>
</div>

Click the button → popover opens. Click outside or press ESC → it closes. The button gets aria-expanded updated automatically. Free.

popover values

• popover or popover="auto" — light-dismiss (click outside closes).
• popover="manual" — only closes when explicitly told. Use for persistent toasts.

Positioning with anchor-positioning

Pair with the CSS anchor-positioning API to position the popover relative to its trigger:

#my-popover {
  position-anchor: --my-button;
  inset-area: bottom span-right;
}
#my-button { anchor-name: --my-button; }

(Anchor positioning is a 2024+ feature with patchier support; use feature detection.)

When to use popover vs dialog

• `<dialog>` — modal. Backdrop dims the page. Focus is trapped inside.
• `popover` — non-modal. Page stays interactive. Multiple popovers can coexist.

Tooltips, dropdown menus, hover cards → popover. Cookie consent, modal forms → dialog.