Introdução a nova API de popover

Popovers estão por toda parte na web, eu particularmente trabalho bastante com popovers, especialmente no formato de tooltips e até hoje a implementação deste recurso necessitava de JavaScript. Mas com a nova API de popover conseguimos fazer a implementação deste recurso com apenas HTML e CSS. Além de tooltips os elementos popovers podem ser usados para:

• Menu de ações
• Sugestões de forms
• Seleção de conteúdo
• Explicação de interface

A vantagem de ter uma API implementada nativamente é a capacidade de abstrair todas as implementações, acessibilidade e redução da carga de javascript das nossas aplicações. A API já está disponível no Chrome/Edge 114 e Safari 17. O que a API gerência para você:

• Controle de camadas entre elementos como gerenciamento de zIndex
• Clique fora do elemento fecha o componente.
• Navegação de foco de elementos
• Controle via teclado

Como Trabalhar com API de Popover?

Para utilizar a API precisaremos de dois elementos API que serão conectados por três atributos:

• popover atributo que marca o elemento como popover
• Um id para fazer referência ao elemento
• popovertarget para fazer referência o elemento que invocaremos

Com isso temos o seguinte resultado:

 <button popovertarget="info-box" popovertargetaction="show">
        Mais informação
      </button>

      <article id="info-box" popover="auto">
        <h2>Informações adicionais</h2>
        <p>Você pode adicionar qualquer tipo de informação.</p>
        <button popovertarget="info-box" popovertargetaction="hide">
          Fechar
        </button>
      </article>
Code language: HTML, XML (xml)

Substituindo comportamento padrões

Você também pode criar popovers explícitos usando popovertargetaction. Isso substitui a ação de alternância padrão. popovertargetaction as opções incluem:

• popovertargetaction="show": mostra o popover. 
• popovertargetaction="hide": oculta o popover.

<button popovertarget="my-popover" popovertargetaction="show">
    <span class="sr-only">Abrir</span>
</button>
<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Fechar</span>
</button>Code language: HTML, XML (xml)

Popovers automáticos versus manuais

Usar o popover atributo por si só é na verdade um atalho para popover="auto". Quando aberto, o padrão popoverforçará o fechamento de outros popovers automáticos, exceto os popovers ancestrais. Ele pode ser dispensado por meio de light-dismiss ou de um botão Fechar.

Por outro lado, a configuração popover=manualcria outro tipo de popover: um popover manual. Eles não forçam o fechamento de nenhum outro tipo de elemento e não fecham por meio de light-dismiss. Você deve fechá-los por meio de um cronômetro ou de uma ação de fechamento explícita. Os tipos de popover apropriados popover=manualsão elementos que aparecem e desaparecem, mas não devem afetar o resto da página, como uma notificação do sistema.

Estilizando popovers

Até agora você aprendeu sobre popovers básicos em HTML. Mas também existem alguns recursos de estilo interessantes que acompanham o popover. Uma delas é a capacidade de estilizar ::backdrop.

Em auto popovers, esta é uma camada diretamente abaixo da camada superior (onde fica o popover), que fica acima do resto da página. No exemplo a seguir, ::backdrop é dada uma cor semitransparente:

#info-box::backdrop {
  background: rgb(190 190 190 / 50%);
}Code language: CSS (css)

Diferença entre popover e dialog

É importante observar que o popoveratributo não fornece semântica por si só. E embora agora você possa criar experiências modais semelhantes a diálogos usando o popover="auto", existem algumas diferenças importantes entre os dois:

Um dialog elemento aberto com dialog.showModal(uma caixa de diálogo modal) é uma experiência que requer interação explícita do usuário para fechar o modal. A popover suporta rejeição de luz. Um modal dialog não. Uma caixa de diálogo modal torna o resto da página inerte já o popover não.