Introducción

Construir tooltips, menús y modales requería JavaScript. La CSS Popover API proporciona una forma declarativa nativa con manejo de posición, toggle, foco y cierre.

Atributos básicos

popover marca un elemento como superposición. popovertarget vincula un botón al popover. Modos: auto (cierre al hacer clic fuera o Escape) y manual (cierre programático).

API Toggle

Métodos: showPopover(), hidePopover(), togglePopover(). Eventos: beforetoggle y toggle con oldState y newState.

Light dismiss

Los popovers auto se cierran al hacer clic fuera, presionar Escape o abrir otro popover.

Posicionamiento con Anchor

Se integra con CSS Anchor Positioning. position-anchor y inset-area controlan dónde aparece, con volteo automático ante desbordamiento.

Estilo y animaciones

Renderizan en la capa superior (top layer), por encima de todo. Usa ::backdrop para el fondo y @starting-style para animaciones de entrada/salida.

Accesibilidad

Maneja roles implícitos (group/dialog), foco y captura de foco automáticamente.

Popover vs

Popover es ideal para tooltips, menús y toasts. <dialog> para formularios modales que requieren captura de foco.