Popover attribute + ::backdrop

Baseline 2024 (Chrome 114, Safari 17, Firefox 125). `popover="hint"` ainda não é Baseline (veja fx-042).

Chrome 114Edge 114Safari 17Firefox 125

Popovers declarativos: qualquer elemento com `popover` abre na top layer via o `popovertarget` de um botão, com light-dismiss, tratamento de Escape e gerenciamento de foco embutidos, sem JS. `::backdrop` estiliza a camada atrás dele.

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: Navegadores sem popover o mantêm escondido; o botão não faz nada; adicione `[popover]:not(:popover-open){display:none}` só onde houver suporte via `@supports selector(:popover-open)`.

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

Prompt

Use a Popover API nativa para menus, tooltips e toasts: adicione `popover` ao painel e `popovertarget="id"` ao botão gatilho; estilize o estado aberto com `:popover-open` e a camada de escurecimento com `::backdrop`. Não escreva handlers de clique fora nem de Escape, o navegador faz o light-dismiss. Combine com anchor positioning (`position-anchor`) para posicioná-lo ao lado do gatilho.