La API de Popover llega a Baseline

Una Kravets

¡Falta muy poco! Una de las funciones que más me entusiasma acaba de llegar a todos los navegadores modernos y es oficialmente parte del Baseline 2024. Y esta función es la API de popover. Los pop-overs proporcionan muchas primitivas y ayudas visuales para desarrolladores para compilar interfaces en capas, como cuadros de herramientas, menús, IUs de enseñanza y mucho más.

Navegadores compatibles

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Origen

Estos son algunos aspectos destacados de las capacidades de los pop-overs:

  • Promoción a la capa superior. Los paneles emergentes aparecerán en la capa superior sobre el resto de la página, por lo que no tendrás que jugar con z-index.
  • Función de descarte de luz Si haces clic fuera del área del cuadro emergente, este se cerrará y se restablecerá el enfoque.
  • Administración de enfoque predeterminada. Si abres el cuadro emergente, el siguiente punto de parada de pestaña se ubicará dentro de él.
  • Vinculaciones de teclas accesibles. Si presionas la tecla esc o la activas dos veces, se cerrará el menú flotante y se restablecerá el enfoque.
  • Vinculaciones de componentes accesibles. Conectar un elemento de popover a un activador de popover semánticamente

Cómo crear ventanas emergentes

Crear popovers es bastante sencillo. Para usar valores predeterminados, todo lo que necesitas es un button para activar el popover y un elemento para activarlo.

  • Primero, establece un atributo popover en el elemento que será el popover.
  • Luego, agrega un id único en el elemento del popover.
  • Por último, para conectar el botón al cuadro emergente, establece el popovertarget del botón en el valor del id del elemento del cuadro emergente.

Este proceso se muestra en el siguiente código:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
Un ejemplo básico del uso del atributo popover.

Para tener un control más detallado sobre la ventana emergente, puedes establecer tipos de ventanas emergentes de forma explícita. Por ejemplo, usar un atributo popover sin valor es lo mismo que popover="auto". El valor auto habilita el comportamiento de descarte ligero y cierra automáticamente otros pop-ups. Usa popover="manual" y deberás agregar un botón de cierre. Los pop-overs manuales no cierran otros pop-overs ni permiten que los usuarios los oculten haciendo clic en la IU. Para crear un popover manual, usa lo siguiente:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
Ejemplo de un popover manual.

Ventana emergente en comparación con el diálogo modal

Es posible que te preguntes si necesitas un cuadro emergente cuando existe un diálogo, y la respuesta es que tal vez no.

Es importante tener en cuenta que el atributo popover no proporciona semántica por sí solo. Si bien ahora puedes compilar experiencias similares a diálogos modales con el popover, existen algunas diferencias clave entre ambos:

El elemento <dialog> modal

  • Se abrió con dialog.showModal().
  • Se cerró con dialog.close().
  • Inactiva el resto de la página.
  • No admite el comportamiento de descarte de la luz.
  • Puedes aplicar un diseño al estado abierto con el atributo [open].
  • Semánticamente, representa un componente interactivo que bloquea la interacción con el resto de la página.

El atributo [popover]

  • Se puede abrir con un invocador declarativo (popovertarget).
  • Se cierra con popovertarget (ventana emergente automática) o popovertargetaction=hide (ventana emergente manual).
  • No inmoviliza el resto de la página.
  • Admite el comportamiento de descarte de la luz.
  • Puedes aplicarle un diseño al estado abierto con la pseudoclase :popover-open.
  • No tiene semántica inherente.

Conclusión y lecturas adicionales

popover ofrece muchas funciones interesantes a la plataforma. Para obtener más información sobre esta API, incluida la accesibilidad de la función y la documentación sobre el conjunto de funciones, te recomendamos que leas los siguientes artículos: