Fecha de publicación: 26 de febrero de 2025
Chrome 133 se basa en la función de popover existente y presenta un nuevo modo: popover="hint"
. Este modo administrado por el navegador habilita un nuevo contexto de apilamiento que simplifica la creación de cuadros de herramientas y elementos flotantes efímeros similares. Reduce el esfuerzo del desarrollador y, al mismo tiempo, mantiene la flexibilidad del diseño.
Introducción y antecedentes
La API de Popover, que se presentó en Chrome 114, te permite crear una IU flotante accesible, como menús y cuadros de herramientas. De forma predeterminada, popover="auto"
controla la funcionalidad de descarte de luz y la administración de enfoque por ti, sin necesidad de secuencias de comandos adicionales, como se explica en Presentación de la API de Popover. Cuando se abre un popover popover="auto"
, se cerrarán todos los demás popovers que no sean ancestros con popover="auto"
, lo que genera una API ergonómica que hace lo más sensato.
Ventanas emergentes que cierran otras ventanas emergentes
<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>
En este ejemplo, si abres el popover 2, se cerrará el popover 1, ya que popover="auto"
solo permite que se abra uno de estos popovers a la vez.
Si bien este comportamiento funciona bien para los menús y los diálogos, puede generar problemas cuando varios tipos de IU flotante deben coexistir. Por ejemplo, un menú y una información sobre herramientas que usan popover="auto"
pueden entrar en conflicto, de modo que abrir la información sobre herramientas cierre el menú. Esto puede parecer una situación poco común, pero aparece mucho en una IU de estilo de aplicación moderna. Por ejemplo, los menús del encabezado de github.com usan ventanas emergentes para los menús y las herramientas de ayuda, lo que permite que ambos sean visibles al mismo tiempo en determinadas condiciones:

Una forma de resolver esto es usar popover="manual"
para los elementos de la información sobre herramientas, lo que permite un control total del popover con secuencias de comandos. Sin embargo, esto requiere la reinstalación del comportamiento de apilamiento, la eliminación de la luz y la administración de enfoque, que son precisamente las tareas para las que se diseñó la API de Popover. Esto nos llevó a explorar formas de extender la API para proporcionar esta funcionalidad faltante.
A través de la investigación con desarrolladores, identificamos dos contextos de apilamiento comunes:
- IU persistente: Por ejemplo, menús y diálogos.
- IU efímera: Por ejemplo, tarjetas flotantes y cuadros de herramientas.
Para admitir ambos, popover="hint"
presenta una segunda pila, distinta de popover="auto"
, lo que garantiza que los menús permanezcan abiertos incluso cuando aparezcan las indicaciones sobre herramientas.
En lugar de introducir múltiples contextos de apilamiento para diferentes tipos de IU, lo que, en esencia, reinventaría z-index
, este enfoque simplifica las cosas definiendo solo dos categorías amplias: IU persistente (auto
) y IU efímera (hint
). Esto logra un equilibrio entre la flexibilidad y evitar que vuelvan a aparecer los mismos problemas que enfrentaste antes de usar el popover.
Comportamiento del valor nuevo
Tanto popover="auto"
como popover="hint"
admiten la eliminación ligera, lo que significa que se cierran automáticamente cuando el usuario hace clic fuera de ellos o presiona Esc en el teclado. En este sentido, ambos estilos son idénticos.
En el caso de ocultar de forma forzosa otros popovers, popover="auto"
cierra todos los demás popovers auto
y hint
cuando se abren, lo que garantiza que solo uno de ellos esté activo a la vez (la única excepción son los popovers anidados, que se explican a continuación). popover="hint"
, por otro lado, solo oculta de manera forzosa otros popovers hint
, lo que permite que los menús y las herramientas de ayuda permanezcan abiertos y coexistan.
En lo que más difieren es en su comportamiento de anidación. popover="auto"
admite anidamiento, lo que permite que un popover secundario permanezca abierto dentro de otro popover superior. popover="hint"
tiene un comportamiento de anidación especial, que es donde entran las “pilas” separadas. Cuando un cuadro emergente hint
está dentro de un cuadro emergente auto
, se une a la pila auto
para mantener la agrupación contextual, lo que significa que permanecerá abierto hasta que otros cuadros emergentes auto
o hint
lo oculten de forma forzosa. Esto proporciona un comportamiento intuitivo, en el que las indicaciones sobre herramientas no interrumpen otros menús ni ventanas emergentes.
Por último, para casos de uso muy diferentes, siempre está popover="manual"
, que no incluye ninguno de estos comportamientos integrados, lo que te permite definir la funcionalidad y el comportamiento precisos que necesitas.
popover="auto"
|
popover="hint"
|
popover="manual"
|
|
---|---|---|---|
Descartar con luz | Sí | Sí | No |
Oculta de manera forzosa: | auto y hint no relacionados |
hint no relacionados |
Nothing |
Anidación: | Sí | Especial (se describió anteriormente) | N/A: No hay luz de descarte |
Activación del desplazamiento del mouse
Un patrón común de UX es que las tarjetas flotantes y las herramientas de ayuda se activen con el desplazamiento del mouse.
Si colocas el cursor sobre un elemento de interés durante un período, se mostrará la tarjeta emergente. Actualmente, ese comportamiento se debe implementar a través de JavaScript, por ejemplo, agregando objetos de escucha para los eventos mouseenter
y mouseleave
. Sin embargo, se está desarrollando otra API que debería hacer que el desplazamiento del mouse active de forma declarativa: la API de Interest Invokers.
Esta API aún está en desarrollo, pero la idea general es agregar un atributo llamado interesttarget
a muchos tipos de elementos, lo que les otorga un comportamiento de activación del desplazamiento del mouse:
<a interesttarget="my-hovercard" href="...">
Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
This is the hovercard
</span>
Con el código HTML anterior, si colocas el cursor sobre el vínculo <a>
, se mostrará automáticamente el popover my-hovercard
. Si mueves el puntero fuera de ese elemento, se ocultará el menú flotante. ¡Todo sin JavaScript!
Ejemplos
<button>An interesting button</button>
<div popover="hint">More info about the button</div>
[popover] {
margin: 0;
inset: auto;
position-area: bottom right;
}
const button = document.querySelector('button');
const popover = document.querySelector('[popover]');
button.onmouseenter = () => {
setTimeout(() => {
popover.showPopover({source: button});
}, 500);
}
button.onmouseleave = () => {
setTimeout(() => {
popover.hidePopover();
}, 500);
}

En este ejemplo, se usa popover="hint"
para crear una información sobre herramientas básica, que proporciona más información sobre el botón cuando se coloca el mouse sobre él. Los controladores de eventos para mouseenter
y mouseleave
proporcionan la activación del desplazamiento del mouse con retrasos simples de 0.5 segundos. Ten en cuenta que este ejemplo no controla algunos detalles:
- Colocar el cursor sobre el popover en sí no impide que el hecho de colocar el cursor sobre un elemento activador cierre el popover. Por lo tanto, no es posible copiar ni pegar texto del popover, por ejemplo.
- No hay "anulación de rebote": colocar el cursor sobre el botón durante una pequeña fracción de segundo es suficiente para activar el popover, incluso si se quita el cursor rápidamente del botón antes de que transcurra el tiempo de retraso. En este caso, la información sobre herramientas se abre y se cierra rápidamente.
- No se puede acceder al ejemplo en absoluto: cualquier usuario que no use un mouse no puede acceder al contenido de la ventana de información.
Estas deficiencias se pueden corregir con JavaScript adicional.
Por ejemplo, se debe agregar focus
(o quizás los controladores de eventos keydown
y keyup)
) para admitir la activación del popover basada en el teclado.
Si deseas obtener una explicación de los elementos que se deben controlar correctamente para garantizar que se pueda acceder a la información sobre herramientas, consulta esta excelente entrada de blog de Sarah Higley.
La API de Interest Invokers se encargará automáticamente de todos estos problemas (y muchos más) de forma declarativa.
Más información
Consulta la explicación de la función o la especificación HTML para obtener más detalles.