Popover API de HTML: playground en vivo y referencia
Playground de la Popover API de HTML
Popover API de HTML: popovertarget, showPopover, eventos | We.Inc
Prueba la Popover API en vivo: popovers auto, manual y hint, botones popovertarget, showPopover, hidePopover y togglePopover, además de un registro de los eventos beforetoggle y toggle.
Añade el atributo popover a cualquier elemento y apunta un botón hacia él con popovertarget="id", y el navegador se encarga de abrirlo, cerrarlo, la capa superior y la tecla Escape sin JavaScript. En scripts, usa showPopover(), hidePopover() o togglePopover(), y escucha los eventos beforetoggle y toggle. popover="auto" se cierra al hacer clic fuera; manual no.
Tipos de popover
Valor
Se cierra con clic fuera o Escape
Otros popovers
popover o popover="auto"
Sí
Abrir uno cierra los demás popovers auto, salvo sus ancestros
popover="manual"
No, ciérralo tú
Puede haber cualquier número abiertos a la vez
popover="hint"
Sí
Cierra los demás popovers hint que no son sus ancestros; pensado para tooltips
Antes, un popover significaba una librería de posicionamiento, un manejador de clics fuera y una pelea con el z-index. La Popover API traslada todo eso a HTML. El playground de abajo crea un popover real en tu navegador para que cambies su tipo, lo controles desde código y veas los eventos dispararse en orden.
Elige auto, manual o hint para el popover del playground.
Ábrelo con el botón declarativo o ejecuta los tres métodos con los botones de script.
Haz clic fuera o pulsa Escape para ver qué tipos se cierran solos.
Lee el registro de eventos: primero se dispara beforetoggle y luego toggle, cada uno con oldState y newState.
Solo los elementos button e input pueden llevar popovertarget. Usa un botón real para que los usuarios de teclado puedan alcanzarlo.
popovertargetaction acepta toggle (el valor por defecto), show o hide, así que los botones separados de abrir y cerrar no necesitan script.
Da estilo al estado abierto con :popover-open y oscurece la página de detrás con ::backdrop.
Un popover no es modal. Para un formulario que hay que completar antes de volver a la página, usa un dialog abierto con showModal().
Los popovers visibles están en la capa superior, así que ya no necesitas un z-index alto para mantenerlos por encima de todo.
Preguntas frecuentes
¿Qué navegadores admiten la Popover API?
MDN marca la Popover API como Baseline newly available desde enero de 2025, lo que significa que funciona en las últimas versiones de los principales navegadores. Algunas partes más nuevas, como el valor hint, pueden tener un soporte más limitado, así que revisa la tabla de compatibilidad antes de depender de ellas.
¿Qué diferencia hay entre los popovers auto y manual?
Un popover auto admite light dismiss: hacer clic fuera o pulsar Escape lo cierra, y abrirlo cierra los demás popovers auto. Un popover manual sigue abierto hasta que un botón o un script lo cierra, y puede haber varios abiertos a la vez, lo que encaja con las notificaciones tipo toast.
¿Escape cierra todos los popovers?
Escape cierra los popovers auto y hint, los mismos que se cierran con un clic fuera. Un popover manual ignora ambas cosas, así que necesita su propio botón de cerrar o una llamada a hidePopover().
¿Cómo sé cuándo se abre o se cierra un popover?
Escucha el evento toggle en el elemento popover. Su newState es "open" o "closed". El evento beforetoggle se dispara justo antes del cambio, que es el momento de preparar el contenido.
¿Dónde aparece un popover por defecto?
En el centro del viewport, con posicionamiento fijo, en la capa superior. Muévelo con tu propio CSS o con anchor positioning donde el navegador lo admita.
Primero, lo declarativo
La mayoría de los popovers no necesitan ningún script. El botón y el popover se vinculan por id, y el navegador conecta la apertura y el cierre, el light dismiss y la tecla Escape.
Recurre a showPopover() y sus métodos hermanos cuando el disparador no sea un botón, por ejemplo para abrir una pista tras una validación fallida de un formulario o cerrar un toast con un temporizador.
Menús, toasts y pistas
Auto encaja con menús y selectores que deben desaparecer cuando la atención se va a otra parte. Manual encaja con notificaciones que se apilan y se quedan hasta que se descartan. Hint está pensado para tooltips al pasar el ratón o al enfocar.
Sea cual sea el tipo, mantén el contenido breve y asegúrate de que cada acción dentro de él también se puede alcanzar con el teclado.
Referencia de la Popover API
Atributos, métodos, eventos y selectores
Nombre
Tipo
Qué hace
Atributo global
Convierte el elemento en popover: auto, manual o hint
Atributo en button o input
Id del popover que el control abre y cierra
Atributo en button o input
toggle (por defecto), show o hide
showPopover()
Método
Añade el popover a la capa superior
hidePopover()
Método
Lo quita de la capa superior y lo oculta
togglePopover()
Método
Lo muestra si está oculto y lo oculta si está visible
Evento
Se dispara antes de que cambie el estado; tiene oldState y newState
Evento
Se dispara después de que cambie el estado; tiene oldState y newState
:popover-open
Pseudoclase CSS
Coincide con un popover mientras está visible
::backdrop
Pseudoelemento CSS
La capa que hay detrás de un popover visible
Ejemplos de popover sin JavaScript
Estos marcos se ejecutan con los scripts desactivados, y los popovers siguen funcionando porque el comportamiento viene del HTML.
Un menú con popover auto
Haz clic en el botón y luego en otro sitio, o pulsa Escape. El menú se cierra solo.
Un toast manual con botones separados para mostrar y ocultar
Aquí hacer clic fuera no hace nada. Solo el botón de ocultar lo cierra.
Oscurecer la página detrás de un popover
::backdrop da estilo a la capa que hay bajo el popover. Sigue sin ser modal; se puede hacer clic en la página de detrás para cerrarlo.
Controlar un popover desde JavaScript
Métodos, eventos y detección de soporte
Comprueba el soporte antes de usar los métodos y luego lee newState en el evento toggle.
Playground de popover
Tu navegador ejecuta aquí un popover real: cambia su tipo, usa sus métodos y lee el registro de eventos.
Botón declarativo (popovertarget)
Métodos por script
Soy un popover {v}. Haz clic fuera o pulsa Escape para probar el light dismiss.
Cerrar
Estado: {v}
Registro de eventos
Borrar registro
Todavía no hay eventos.
Este navegador no admite la Popover API, así que el playground está desactivado.