Implementación de funcionalidad de popover con la API Popover

Resumen de los puntos principales de la API Popover

Introducción a la API Popover

• La API Popover ofrece a los desarrolladores un mecanismo estandarizado, consistente y flexible para mostrar contenido emergente sobre el contenido de una página
• El contenido emergente puede controlarse de forma declarativa mediante atributos HTML o a través de JavaScript

Características del popover y cómo usarlo

• Los popovers se dividen en dos tipos: modal y no modal, y los popovers creados con la API Popover siempre son no modales
  • Modal significa que, mientras el popover está visible, el resto de la página se renderiza como no interactivo
  • No modal significa que, mientras el popover está visible, se puede seguir interactuando con el resto de la página
• Entre los casos de uso habituales de los popovers están los menús de acciones, las notificaciones tipo "toast" personalizadas, las sugerencias para elementos de formulario, los selectores de contenido o las interfaces educativas
• Los popovers pueden crearse de forma declarativa mediante atributos HTML o mediante la API de JavaScript

Atributos HTML relacionados con la API Popover

• popover: atributo global que convierte un elemento en un elemento popover
• popovertarget: convierte un elemento <button> o <input> en un botón de control del popover
• popovertargetaction: especifica la acción que se realizará sobre el elemento popover controlado por el <button> o <input> de control

Funcionalidades CSS relacionadas con la API Popover

• ::backdrop: elemento de pantalla completa situado justo detrás del elemento popover, que permite agregar efectos al contenido de la página detrás del popover si se desea
• :popover-open: pseudoclase que coincide solo cuando el elemento popover está visible, y puede usarse para aplicar estilos cuando el popover se muestra

Interfaces y extensiones relacionadas con la API Popover

• ToggleEvent: representa un evento que notifica al usuario cuando el estado del elemento popover cambia entre visible y oculto
• Se agregan propiedades de instancia como HTMLElement.popover, HTMLButtonElement.popoverTargetElement, HTMLInputElement.popoverTargetElement, HTMLButtonElement.popoverTargetAction, HTMLInputElement.popoverTargetAction, entre otras
• Se agregan métodos de instancia como HTMLElement.hidePopover(), HTMLElement.showPopover(), HTMLElement.togglePopover()
• Se agregan los eventos beforetoggle y toggle

Opinión de GN⁺

• La API Popover es relevante porque ofrece a los desarrolladores web una forma estandarizada de implementar interfaces de popover con facilidad. Antes, para esto había que usar librerías o implementarlo manualmente
• Sin embargo, hay que tener en cuenta que la API Popover sigue siendo una función experimental y que la compatibilidad entre navegadores es limitada. Para usarla en producción, puede ser necesario considerar polyfills o usarla en conjunto con librerías existentes
• Algunas librerías que ofrecen funcionalidades similares son el componente Popover de Bootstrap y Tippy.js
• Al usar la API Popover, también debe considerarse la accesibilidad. Debe ser posible controlar el popover con el teclado y también se debe proporcionar texto alternativo para usuarios de lectores de pantalla

[GN⁺]

Opiniones de Hacker News

En resumen, es lo siguiente.

• Cuando se introduzca CSS Anchor Positioning, al combinarlo con la Popover API se podrán implementar tooltips personalizados o menús contextuales de forma declarativa, por lo que ya no harían falta bibliotecas como PopperJS.
• Si lo que se quiere es un diálogo modal, también se puede usar el elemento <dialog>.
• Actualmente, los popovers tienen limitaciones de implementación, como que no pueden salirse de los límites de la ventana del navegador y no se integran bien con el sistema de ventanas del SO anfitrión. Para implementarlo correctamente, en Win32 haría falta un HWND separado para cada popover y, en macOS, un NSView.
• Resulta irónico que los navegadores tengan bloqueadores de pop-ups y aun así se creen APIs como esta. Hace pensar en las guerras de anuncios pop-up/pop-under de finales de los 90 y principios de los 2000.
• Al usar la Popover API, será más fácil bloquearlos apuntando a ellos con extensiones. Probablemente se use sobre todo para cosas que a los usuarios no les gustan, como CTA de marketing o chats de soporte invasivos.
• Dicen que si quieres hacer un popover modal uses el elemento <dialog>, pero en casos como difuminar el fondo, convertir el popover en modal sí es un caso de uso válido. ¿No sería mejor algo como <popover modal=true>?
• Se compartió un ejemplo de código con una implementación personalizada usando Stimulus + Popper.
• Señalan que en la página no hay ninguna imagen que muestre qué es un popover.
• Reacciones de asombro ante la llegada de la Popover API.