A API Popover chega ao valor de referência

Está chegando a hora! Um dos recursos mais entusiasmados acabou de ser lançado em todos os navegadores mais recentes e faz parte do Baseline de 2024. Esse recurso é a API Popover. O Popover tem vários primitivos e recursos de desenvolvedor incríveis para você criar interfaces em camadas, como dicas, menus, interfaces de ensino e muito mais.

Compatibilidade com navegadores

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

Origem

Alguns destaques rápidos dos recursos de pop-over incluem:

  • Promoção para a camada superior. Os pop-ups vão aparecer na camada superior acima do restante da página para que você não precise mexer no z-index.
  • Funcionalidade de dispensa simples. Clicar fora da área do pop-up vai fechá-lo e retornar o foco.
  • Gerenciamento de foco padrão. Abrir o pop-over faz a próxima guia parar dentro dele.
  • Vinculações de teclado acessíveis. Pressionar a tecla esc ou alternar duas vezes fechará o pop-over e retornará o foco.
  • Vinculações de componentes acessíveis. Conectar um elemento pop-over a um acionador pop-over semanticamente.

Como criar pop-ups

Criar popovers é bem simples. Para usar valores padrão, você só precisa de um button para acionar o pop-up e um elemento para acionar.

  • Primeiro, defina um atributo popover no elemento que será o pop-up.
  • Em seguida, adicione um id exclusivo ao elemento pop-over.
  • Por fim, para conectar o botão ao pop-over, defina o popovertarget dele como o valor da id do elemento pop-over.

Isso é mostrado no seguinte 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>
.
Um exemplo básico do uso do atributo pop-over.

Para ter um controle mais granular sobre o pop-up, você pode definir explicitamente os tipos de pop-over. Por exemplo, usar um atributo popover básico sem valor é o mesmo que popover="auto". O valor auto ativa o comportamento de dispensa de luz e fecha automaticamente outros pop-ups. Use o popover="manual" para adicionar um botão "Fechar". Os pop-ups manuais não fecham outros pop-ups nem permitem que os usuários o dispensem clicando fora da interface. Crie um pop-up manual usando o seguinte:

<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>
.
Um exemplo de pop-up manual.
.

Caixa de diálogo pop-up versus modal

Você pode estar se perguntando se precisa de pop-over quando uma caixa de diálogo existe, e a resposta é: talvez não seja possível.

É importante observar que o atributo popover não fornece semântica por si só. Embora agora você possa criar experiências modais semelhantes a caixas de diálogo usando pop-over, há algumas diferenças principais entre os dois:

O elemento <dialog> modal

  • Aberto com dialog.showModal().
  • Fechado com dialog.close().
  • Torna o restante da página inerte.
  • Não oferece suporte ao comportamento de dispensa de luz.
  • É possível estilizar o estado aberto com o atributo [open].
  • Representa semanticamente um componente interativo que bloqueia a interação com o restante da página.

O atributo [popover]

  • Pode ser aberto com um invocador declarativo (popovertarget).
  • Fechado com popovertarget (popover automático) ou popovertargetaction=hide (popover manual).
  • Não torna o restante da página inerte.
  • Oferece suporte ao comportamento de dispensa de luz.
  • É possível estilizar o estado aberto com a pseudoclasse :popover-open.
  • Nenhuma semântica inerente.

Conclusão e mais informações

Há muitos recursos interessantes que o popover traz para a plataforma. Para saber mais sobre essa API, incluindo mais informações sobre acessibilidade do recurso e documentação relacionada ao conjunto de recursos, aqui estão algumas leituras recomendadas para mais informações: