La Popover API
Cree tooltips y diálogos con el atributo nativo popover
La Popover API es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Qué hace Popover API
Popover API proporciona a HTML una forma nativa de crear popovers, diálogos, tooltips y menús, sin JavaScript manual para el posicionamiento, la gestión del foco, el cierre al hacer clic fuera o el cierre con Escape. El comportamiento integrado coincide con lo que esperan los usuarios.
El atributo popover
Añada popover a cualquier elemento para convertirlo en un popover. Está oculto de forma predeterminada. Un botón activador con popovertarget="popover-id" lo muestra al hacer clic. El navegador gestiona automáticamente su estado de apertura y cierre.
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>Modos de popover
popover="auto" (predeterminado): se cierra al hacer clic fuera o pulsar Escape; solo puede haber un popover automático abierto a la vez. popover="manual": no se cierra automáticamente; debe cerrarse explícitamente mediante JS u otro activador.
Botones activadores
El atributo popovertarget vincula un botón con un popover mediante su id. El navegador gestiona el comportamiento de alternancia: haga clic en el botón para mostrarlo y vuelva a hacer clic o haga clic fuera para cerrarlo. Para el uso básico no se necesitan gestores de eventos.
Renderizado en la capa superior
Los popovers se renderizan en la capa superior, por encima de cualquier otro contenido, independientemente de z-index o del contexto de apilamiento. Esto elimina el clásico error de que un modal quede oculto detrás de un padre con overflow:hidden, un problema habitual en los popovers implementados manualmente.
Mostrar y ocultar mediante programación
JavaScript puede mostrar u ocultar popovers: element.showPopover(), element.hidePopover(), element.togglePopover(). Tienen la misma semántica que el activador declarativo; el cierre al hacer clic fuera sigue funcionando en el modo auto.
Evento toggle
Los popovers emiten un evento toggle cuando cambia su estado. La propiedad newState del evento es "open" o "closed". Resulta útil para analítica, gestión del foco o coordinación de otros elementos de UI con el estado de apertura del popover.
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});Pseudoclase CSS
La pseudoclase :popover-open coincide con los popovers que están abiertos. Puede definir transiciones de estilo, opacidad y transformaciones basadas en este estado: [popover]:popover-open { opacity: 1; transform: none; }.
Posicionamiento mediante anclas
Combinados con CSS Anchor Positioning API, los popovers pueden posicionarse automáticamente en relación con su activador, sin necesidad de JavaScript para el patrón clásico de "tooltip junto al botón". Ambas funciones forman parte de la misma tendencia hacia primitivas modernas de UI.
Accesibilidad
El navegador gestiona el atrapamiento del foco en los popovers modales, devuelve el foco al activador al cerrarlos y anuncia su estado de apertura a los lectores de pantalla. Implementar esto manualmente requiere una cantidad considerable de código repetitivo de ARIA; Popover API lo proporciona de forma integrada.
Compatibilidad de los navegadores
Chrome y Safari son compatibles con Popover API; Firefox incorporó la compatibilidad más recientemente. Para una mayor compatibilidad, existe un pequeño polyfill. Los proyectos nuevos pueden usar la implementación nativa y aplicar una mejora progresiva para los navegadores antiguos.
Sustitución de patrones antiguos
Muchas bibliotecas de modales en JS (sweetalert, react-modal) existen principalmente para compensar funciones que Popover API ahora ofrece de forma nativa. Planifique la migración: bundles más pequeños, mejores valores predeterminados y menos código que mantener. Popover API es una de las mayores mejoras de HTML de los últimos años.
Comprobación de conocimientos
¿Qué hace popover="auto" que no hace popover="manual"?
Resumen
Popover API añade el atributo popover, además de showPopover/hidePopover/togglePopover en JS, el vínculo de activadores mediante popovertarget, el renderizado en la capa superior por encima de todos los contextos de apilamiento, la pseudoclase :popover-open y los eventos toggle. El modo auto se cierra al hacer clic fuera; el modo manual requiere una acción explícita. Sustituye a la mayoría de las bibliotecas personalizadas de modales y tooltips con una única primitiva de HTML que gestiona correctamente la accesibilidad, el foco y z-index.
Preguntas frecuentes
¿La lección «La Popover API» es gratis?
Sí — el texto completo de «La Popover API» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «La Popover API»?
Cree tooltips y diálogos con el atributo nativo popover Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «La Popover API»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.