Implementação de funcionalidades de popover com a API Popover

Resumo dos principais pontos da API Popover

Introdução à API Popover

• A API Popover oferece aos desenvolvedores um mecanismo padronizado, consistente e flexível para exibir conteúdo de popover sobre o conteúdo da página
• O conteúdo do popover pode ser controlado de forma declarativa usando atributos HTML ou por meio de JavaScript

Características e formas de uso do Popover

• O popover se divide em dois modos, Modal e Non-modal, e os popovers criados com a API Popover são sempre Non-modal
  • Modal significa que o restante da página é renderizado de forma não interativa enquanto o popover está visível
  • Non-modal significa que é possível interagir com o restante da página enquanto o popover está visível
• Casos de uso comuns para popovers incluem menus de ação, notificações "toast" personalizadas, sugestões em elementos de formulário, seletores de conteúdo ou interfaces educacionais
• Os popovers podem ser criados declarativamente por meio de atributos HTML ou pela API JavaScript

Atributos HTML relacionados à API Popover

• popover: atributo global que transforma um elemento em um elemento popover
• popovertarget: transforma um elemento <button> ou <input> em um botão de controle do popover
• popovertargetaction: especifica a ação a ser executada no elemento popover controlado pelo <button> ou <input> de controle

Recursos de CSS relacionados à API Popover

• ::backdrop: elemento de tela cheia posicionado imediatamente atrás do elemento popover, permitindo, se desejado, adicionar efeitos ao conteúdo da página atrás do popover
• :popover-open: pseudoclasse que corresponde apenas quando o elemento popover está visível, podendo ser usada para definir estilos quando o popover é exibido

Interfaces e extensões relacionadas à API Popover

• ToggleEvent: representa um evento que notifica o usuário quando o estado do elemento popover alterna entre visível e oculto
• Foram adicionadas propriedades de instância como HTMLElement.popover, HTMLButtonElement.popoverTargetElement, HTMLInputElement.popoverTargetElement, HTMLButtonElement.popoverTargetAction, HTMLInputElement.popoverTargetAction etc.
• Foram adicionados métodos de instância como HTMLElement.hidePopover(), HTMLElement.showPopover(), HTMLElement.togglePopover() etc.
• Foram adicionados os eventos beforetoggle e toggle

Opinião do GN⁺

• A API Popover é relevante por oferecer aos desenvolvedores web uma forma padronizada de implementar interfaces de popover com facilidade. Antes, era necessário usar bibliotecas ou implementar isso manualmente
• No entanto, é preciso considerar que a API Popover ainda é um recurso experimental e que o suporte dos navegadores é limitado. Para uso em produção, pode ser necessário avaliar o uso em conjunto com polyfills ou bibliotecas existentes
• Bibliotecas que oferecem funcionalidades semelhantes incluem o componente Popover do Bootstrap e o Tippy.js
• Ao usar a API Popover, também é importante considerar a acessibilidade. O popover deve poder ser controlado por teclado, e textos alternativos também devem ser fornecidos para usuários de leitores de tela

[GN⁺]

Comentários do Hacker News

Em resumo, é o seguinte.

• Quando o CSS Anchor Positioning for introduzido, ele poderá ser combinado com a Popover API para implementar tooltips personalizados ou menus de contexto de forma declarativa, eliminando a necessidade de bibliotecas como o PopperJS.
• Se você quiser uma caixa de diálogo modal, também é possível usar o elemento <dialog>.
• Atualmente, os popovers têm limitações de implementação, como não poder ultrapassar os limites da janela do navegador, e não se integram bem ao sistema de janelas do SO hospedeiro. Para implementar isso corretamente, no Win32 seria necessário um HWND separado para cada popover, e no macOS um NSView.
• É irônico que os navegadores tenham bloqueadores de pop-up e, ainda assim, criem uma API dessas. Isso lembra a guerra dos anúncios pop-up/pop-under do fim dos anos 90 e início dos anos 2000.
• Com a Popover API, ficará mais fácil bloquear isso com extensões por segmentação. Ela provavelmente será usada principalmente para coisas que os usuários odeiam, como CTAs de marketing ou chats de suporte intrusivos.
• Dizem para usar o elemento <dialog> se você quiser tornar um Popover modal, mas em casos como desfocar o fundo, faz sentido que o popover seja modal. Será que <popover modal=true> não seria uma abordagem melhor?
• Foi compartilhado um código de exemplo de implementação personalizada com Stimulus + Popper.
• Houve quem apontasse que não há nenhuma imagem na página mostrando o que é um popover.
• Reações de admiração ao surgimento da Popover API.