Ya puedes usar el Popover de HTML nativo

Una de las características más esperadas por la comunidad de desarrollo web acaba de llegar a todos los navegadores modernos.

Estamos hablando del Popover API. Esta funcionalidad no solo trae innovación sino que facilita enormemente la creación de interfaces en capas como tooltips, menús, UIs educativos, y más.

Soporte del Navegador y Características Destacadas

• La Popover API ya está disponible en las últimas versiones de todos los navegadores principales. Esto significa que puedes empezar a usarla sin preocuparte por la compatibilidad.

• Los popovers ahora aparecen sobre el resto de la página. Esto elimina la necesidad de jugar con el z-index para asegurarse de que están en la parte superior.

• Si haces clic fuera del área del popover, este se cerrará automáticamente y devolverá el foco. Esto es ideal para mantener una interfaz limpia y eficiente.

• Al abrir el popover, el siguiente punto de tabulación se sitúa dentro del popover, facilitando la navegación con el teclado.

• Pulsar la tecla esc o hacer doble toggling cerrará el popover y devolverá el foco, mejorando la accesibilidad.

• Conectar un elemento de popover a un disparador de popover de manera semántica es simple y mejora la experiencia del usuario.

Creando Popovers: Un Proceso Sencillo

Ejemplo Básico

Crear un popover es directo. Aquí te mostramos cómo:

1. Asigna un atributo popover al elemento que será el popover.

2. Agrega un ID único al elemento del popover.

3. Para conectar el botón al popover, configura el popovertarget al valor del ID del elemento del popover.

<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

Control Granular

Si deseas un control más detallado sobre el comportamiento del popover, puedes especificar tipos de popover, como auto para comportamiento de cierre ligero y manual para popovers que requieren un botón de cierre.

<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>

Popover frente a Modal Dialog

Diferencias Clave

Aunque puedes crear experiencias similares a diálogos modales con popover, hay diferencias importantes:

• Dialog: Se abre con dialog.showModal(), se cierra con dialog.close(), hace el resto de la página inerte.

• Popover: Se abre con un invocador declarativo, se cierra con acciones como popovertargetaction=hide, no hace inerte el resto de la página.

¿Estás listo para probar el Popover API en tus proyectos?

Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!