Popover attribute + ::backdrop

Baseline 2024 (Chrome 114, Safari 17, Firefox 125). `popover="hint"` is not yet Baseline (see fx-042).

Chrome 114Edge 114Safari 17Firefox 125

Declarative popovers: any element with `popover` opens in the top layer via a button's `popovertarget`, with light-dismiss, Escape handling and focus management built in, no JS. `::backdrop` styles the layer behind it.

CSS

.fx-012-btn {
  anchor-name: --fx-012
}
.fx-012 {
  position-anchor: --fx-012;
  inset: auto;
  top: anchor(bottom);
  left: anchor(left);
  margin: 6px 0 0;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 10px 30px #0002;
  display: none;
  flex-direction: column;
  min-width: 180px;
  font-family: system-ui
}
.fx-012:popover-open {
  display: flex
}
.fx-012 a {
  padding: 8px 12px;
  border-radius: 6px;
  color: #111;
  text-decoration: none
}
.fx-012 a:hover {
  background: #f2f2f2
}
.fx-012::backdrop {
  background: #0003
}
@supports not (anchor-name:--a) {
  .fx-012 {
    inset: 0;
    margin: auto
  }
}
.fx-012 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<button popovertarget="fx-012-menu" class="fx-012-btn">Open menu</button>
<div id="fx-012-menu" popover class="fx-012">
  <a href="#">Profile</a><a href="#">Settings</a><a href="#">Sign out</a>
</div>

Fallback: Browsers without popover keep it hidden; the button does nothing; add `[popover]:not(:popover-open){display:none}` only where supported via `@supports selector(:popover-open)`.

Source: developer.mozilla.org/en-US/docs/Web/API/Popover_API

Prompt

Use the native Popover API for menus, tooltips and toasts: add `popover` to the panel and `popovertarget="id"` to the trigger button; style open state with `:popover-open` and the dimming layer with `::backdrop`. Do not write click-outside or Escape handlers, the browser does light-dismiss. Pair with anchor positioning (`position-anchor`) to place it next to the trigger.