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.
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 daid
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>
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>
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) oupopovertargetaction=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: