Popover attribute + ::backdrop

Baseline 2024 (Chrome 114, Safari 17, Firefox 125). `popover="hint"` ist noch nicht Baseline (siehe fx-042).

Chrome 114Edge 114Safari 17Firefox 125

Deklarative Popover: jedes Element mit `popover` öffnet sich im Top Layer über das `popovertarget` eines Buttons, mit eingebautem Light-Dismiss, Escape-Behandlung und Fokusverwaltung, ohne JS. `::backdrop` stylt die Ebene dahinter.

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: Browser ohne Popover halten es versteckt; der Button tut nichts; ergänze `[popover]:not(:popover-open){display:none}` nur dort, wo es per `@supports selector(:popover-open)` unterstützt wird.

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

Prompt

Nutze die native Popover API für Menüs, Tooltips und Toasts: setze `popover` auf das Panel und `popovertarget="id"` auf den auslösenden Button; style den offenen Zustand mit `:popover-open` und die abdunkelnde Ebene mit `::backdrop`. Schreibe keine Click-outside- oder Escape-Handler, der Browser übernimmt den Light-Dismiss. Kombiniere mit Anchor Positioning (`position-anchor`), um es neben dem Auslöser zu platzieren.