# Popover attribute + ::backdrop

Estado: Baseline 2024 (Chrome 114, Safari 17, Firefox 125). `popover="hint"` todavía no es Baseline (ver fx-042).  
Fuente: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API  
Página: https://designforai.dev/es/css/popover-attribute

Popovers declarativos: cualquier elemento con `popover` se abre en la capa superior mediante el `popovertarget` de un botón, con cierre al hacer clic fuera, gestión de Escape y del foco incorporadas, sin JS. `::backdrop` estiliza la capa de detrás.

## HTML

```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>
```

## CSS

```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; }
```

Fallback: Los navegadores sin popover lo mantienen oculto; el botón no hace nada; añade `[popover]:not(:popover-open){display:none}` solo donde esté soportado, vía `@supports selector(:popover-open)`.

## Prompt

Usa la Popover API nativa para menús, tooltips y toasts: añade `popover` al panel y `popovertarget="id"` al botón disparador; estiliza el estado abierto con `:popover-open` y la capa atenuada con `::backdrop`. No escribas manejadores de clic fuera ni de Escape, el navegador hace el cierre ligero. Combínalo con anchor positioning (`position-anchor`) para colocarlo junto al disparador.