La Popover API: popups, menús y tooltips nativos sin biblioteca

La Popover API es la respuesta integrada del navegador a un problema que todo desarrollador ha resuelto a mano cien veces: mostrar una pequeña pieza de UI - un menú, un tooltip, una tarjeta, una notificación - encima de todo lo demás y cerrarla de nuevo con limpieza. Con el atributo popover y una diminuta interfaz JavaScript, obtienes la capa superior, el cierre ligero y la gestión de Esc gratis, sin biblioteca. Así funciona.

El popover más simple

Cualquier elemento se convierte en popover añadiendo el atributo popover. Un botón lo abre con popovertarget apuntando al id del popover:

<button popovertarget="menu">Open menu</button>

<div id="menu" popover>
  <p>I am a popover. Click outside or press Esc to close me.</p>
</div>

Eso es todo. Sin manejador de clic, sin z-index, sin escucha de clic fuera. El navegador renderiza el popover en la capa superior (por encima de toda la página, sin guerras de z-index) y lo cierra con Esc o un clic fuera.

auto vs manual

Hay dos tipos de popover, y la diferencia es quién los cierra:

<!-- auto: light-dismiss, only one open in a stack -->
<div id="tip" popover="auto">...</div>

<!-- manual: you open and close it yourself -->
<div id="toast" popover="manual">...</div>

Un popover auto admite cierre ligero: Esc o un clic fuera lo cierra, y abrir uno nuevo cierra el anterior de la misma pila. Un popover manual ignora todo eso y permanece abierto hasta que tu código lo oculta - la opción correcta para un toast o un panel persistente.

Controlarlo desde JavaScript

Cuando necesitas abrir o cerrar un popover en código, tres métodos hacen el trabajo, más un evento toggle para reaccionar a los cambios de estado:

const menu = document.getElementById("menu");
menu.showPopover();     // open it
menu.hidePopover();     // close it
menu.togglePopover();   // flip it

menu.addEventListener("toggle", (e) => {
  console.log(e.newState); // "open" or "closed"
});

También hay un evento beforetoggle que se dispara justo antes del cambio de estado, útil para cargar contenido de forma diferida o ejecutar una animación de entrada.

Estilos y posicionamiento

Aplica estilo a un popover mientras está abierto con la pseudoclase :popover-open, y estiliza la capa oscurecida tras un popover auto con ::backdrop:

[popover]:popover-open {
  /* styles while the popover is shown */
}

[popover]::backdrop {
  /* the layer behind an auto popover */
  background: rgb(0 0 0 / 0.3);
}

Para colocar un popover junto al botón que lo abrió - como un menú desplegable real - combínalo con el posicionamiento por anclaje de CSS (anchor()) en lugar de medir coordenadas en JavaScript. Las dos funciones están diseñadas para trabajar juntas.

Cuándo usarla (y cuándo no)

Recurre a la Popover API para UI transitoria y superpuesta: menús desplegables, tooltips, ayudas contextuales, tarjetas pequeñas y notificaciones. Para un diálogo modal bloqueante que deba atrapar el foco y detener la interacción con la página, el elemento <dialog> sigue siendo la mejor herramienta. Míralos como complementos: popovers para superposiciones ligeras, diálogos para verdaderas modales.

En resumen

La Popover API convierte un montón de JavaScript escrito a mano - render en capa superior, detección de clic fuera, gestión de Esc, malabares de foco - en un solo atributo HTML más tres métodos. Usa auto para menús y tooltips, manual para la UI que controlas, aplica estilo con :popover-open y combínala con el posicionamiento por anclaje para menús desplegables reales. Es compatible con los navegadores modernos hoy, así que la mayoría de los sitios pueden adoptarla sin polyfill.