Pop-over e caixa de diálogo

Um popover é qualquer elemento com um atributo popover e é útil para uma ampla variedade de padrões interativos, incluindo dicas, alertas, notificações e muito mais.

<div id="my-popover" popover>My popover content</div>

O atributo popover oculta o elemento por padrão, e você precisa oferecer uma maneira para os usuários abrirem. Embora os popovers sejam colocados na camada superior, acima de todo o outro conteúdo, eles não são modais. Isso significa que você ainda pode interagir com o conteúdo fora do popover.

Controlar popovers

Antes de conhecer os diferentes tipos de popovers e como eles funcionam, veja como abrir e fechar os seus.

De forma declarativa

Os popovers podem ser controlados totalmente em HTML, sem precisar usar JavaScript, com botões (e entradas com o tipo button) e o atributo popovertarget.

O popover no snippet de código anterior tem um id de my-popover, que pode ser usado para se referir a ele.

<button popovertarget="my-popover">Toggle</button>

Você também pode especificar se um botão deve abrir ou fechar um popover usando popovertargetaction="show" e popovertargetaction="hide".

Com JavaScript

Você também pode controlar um popover usando JavaScript, o que é útil quando você quer mostrar um popover em resposta a algo além do clique de um botão pelo usuário. Para fazer isso, pegue o elemento de popover e chame showPopover(), hidePopover() ou togglePopover().

Tipos de popovers

Ao adicionar um popover ao seu site, há muitas interações a serem consideradas. Como ele abre? Como os usuários podem dispensar a mensagem? O que acontece com outros popovers abertos? Há três tipos de popovers, e você pode escolher o que oferece o comportamento e as interações necessárias para seu caso de uso.

Baús automáticos

Os popovers automáticos têm mais funcionalidades integradas e são o padrão se você não especificar um tipo.

<div id="popover" popover>My popover</div>

Em muitos casos, não é recomendável ter vários popovers abertos ao mesmo tempo. Por isso, os popovers automáticos fecham outros popovers automáticos quando são abertos. Elas também oferecem suporte ao "descarte leve", ou seja, se você clicar fora do popover, ele será fechado automaticamente. Também é possível fechar com a tecla Esc.

Popovers manuais

Embora o comportamento de popover automático abranja muitos casos de uso, há instâncias em que você pode precisar de mais controle sobre os popovers. Com os popovers manuais, você tem muito mais controle e também é responsável por muito mais do comportamento.

<div id="popover" popover="manual">My popover</div>

Esse popover só será fechado quando você o fechar explicitamente. Ele não pode ser fechado por dispensa leve ou pela tecla Esc. mas permite abrir vários popovers simultaneamente.

Pop-ups de dicas

Você também pode usar popovers para adicionar dicas à página. Nesse padrão, você quer passar o cursor sobre um item e ver uma descrição. Apenas um pode estar aberto por vez. Se você usar popovers automáticos, abrir um vai fechar qualquer outro aberto. Se você usar popovers manuais, precisará implementar manualmente muito do comportamento, incluindo o fechamento de outros popovers. Os popovers de dica oferecem uma terceira opção com comportamento semelhante aos popovers automáticos. No entanto, abrir um popover de dica não fecha os popovers automáticos.

<div id="popover" popover="hint">My popover</div>

Os popovers de dica são úteis para informações complementares que são secundárias ao conteúdo principal. Muitas vezes, você vai querer acionar popovers de dicas com eventos que não sejam de clique, como passar o cursor ou focar.

Posicionar o popover

Por padrão, os popovers são abertos no meio da tela. Eles são adicionados à camada superior, acima de todo o seu outro conteúdo, e podem ser posicionados em relação à janela de visualização.

Isso nem sempre é ideal, já que muitas vezes você quer colocar o popover perto do item que o aciona. O posicionamento da âncora oferece uma maneira de fazer isso.

Há duas etapas para o posicionamento da âncora: definir o elemento de âncora e posicionar o elemento em relação a essa âncora. Os popovers podem processar a primeira etapa definindo uma âncora implícita para você. Quando você abre um popover usando <button popovertarget>, o botão é a âncora implícita. Se você estiver abrindo um popover usando JavaScript, poderá definir a âncora implícita com a opção source.

Por padrão, um popover é centralizado usando margin: auto. Para usar o posicionamento de âncora, provavelmente será necessário substituir isso definindo margin: unset.

Estilos e animações

O pseudoelemento ::backdrop

Os popovers abrem em uma camada superior, acima de todo o outro conteúdo da página. Abaixo do popover, há um pseudoelemento ::backdrop que pode ser estilizado.

É importante observar que o conteúdo fora de um popover não é inerte. Você ainda pode clicar em botões e usar o teclado para navegar pela página. Não obscureça o conteúdo da página, por exemplo, aplicando um efeito de desfoque intenso ou definindo o plano de fundo com uma cor opaca.

A pseudoclasse :popover-open

Digamos que você queira criar o layout do conteúdo do popover usando grades CSS. Você adiciona [popover]{ display: grid } e, de repente, todos os popovers ficam visíveis. Isso acontece porque os popovers são ocultados usando display: none. Você pode usar a pseudoclasse :popover-open para aplicar estilos somente quando o popover estiver aberto.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open também é útil ao animar um popover.

Como animar popovers

Há três etapas na animação de um popover:

1. @starting-style {popover:popover-open { } }: os estilos iniciais do popover assim que ele fica visível. Isso precisa ser definido na sua folha de estilo depois da etapa 2.
2. popover:popover-open { }: os estilos do popover quando ele está aberto.
3. popover { }: os estilos que o popover assume ao fechar.

Um popover é ocultado usando display: none quando não está aberto. Para animar isso, defina transition-behavior: allow-discrete e adicione display à lista de propriedades em transition.

Se você estiver posicionando o popover com uma âncora implícita, também será necessário adicionar overlay à lista de propriedades em transition. A relação de âncora implícita é removida quando o popover é removido da camada superior. Portanto, adicionar uma transição à propriedade overlay atrasa isso até que a transição de saída seja concluída.

Interações entre popovers

É provável que você tenha vários popovers em uma página, e a interação deles depende do tipo e de como são usados.

Popovers aninhados

Em alguns casos, talvez seja necessário abrir um popover de dentro de outro. Por exemplo, você pode ter um menu popover, e um dos itens abre um submenu. Quando o usuário fecha o menu principal, você não quer que o submenu permaneça aberto. Os popovers podem ajudar a lidar com isso automaticamente.

Se você abrir um popover de dica de outro popover de dica ou um popover automático de outro popover automático, eles serão colocados em uma pilha. Fechar um popover também fecha todos os popovers depois dele na pilha. Isso também funciona com a dispensa leve: se você clicar em um popover, todos os popovers depois dele na pilha serão fechados, mas os anteriores permanecerão abertos.

Um popover é adicionado à pilha se o elemento de origem estiver dentro de um popover. O elemento de origem é definido automaticamente quando você usa popovertarget em um botão ou com JavaScript ao definir a opção source ao chamar .showPopover({source}) ou .togglePopover({source}).

Há uma pilha para popovers automáticos e outra para popovers de dicas. No entanto, se você abrir um popover de dica dentro de um popover automático, ele será adicionado à pilha automática.

Lembre-se de que os popovers de dica são destinados a informações mais simples e temporárias. Por isso, não é possível acionar um popover automático de um popover de dica.

Se você estiver usando popovers manuais, precisará gerenciar tudo isso manualmente.

Como fechar outros tipos de popover

Você aprendeu que abrir um popover automático fecha outros popovers automáticos, mas como os diferentes tipos interagem? Confira um exemplo de página que usa os três tipos. Há um menu de navegação com botões que usam popovers automáticos para abrir e fechar. Há texto na página que usa pop-ups de dica para mostrar dicas contextuais. Por fim, há um toast com um popover manual para informar ao usuário que uma tarefa em segundo plano foi concluída.

As dicas são efêmeras e aparecem quando passamos o mouse sobre o texto. Esperamos que apenas uma dica seja visível por vez, e acionar uma segunda dica fecha a primeira.

Quando você abre o menu clicando em um botão, a dica é fechada por dois motivos. Primeiro, o clique fora da dica aciona uma dispensa leve. Em segundo lugar, abrir um popover automático dispensa todos os popovers de dicas abertos. Isso acontece porque o usuário mudou o foco, e o conteúdo efêmero em um popover de dica não é mais relevante. Isso significa que, se você chamar showPopover() em um popover automático, qualquer popover de dica aberto será fechado.

Os menus suspensos são popovers automáticos. Com menus suspensos, você espera que apenas um esteja aberto por vez, e abrir um fecha o outro. Como você viu, abrir um popover automático também fecha todos os popovers de dica abertos.

No entanto, enquanto um menu suspenso está aberto, talvez você queira ver o conteúdo de uma dica sem relação. Mostrar uma dica não fecha os popovers automáticos.

O popover manual não é afetado pelos popovers automáticos ou de dica. Quando ele é aberto, não fecha nenhum popover automático ou de dica. No entanto, se você abrir um popover manual clicando em um botão, isso vai acionar uma dispensa leve de dicas e popovers automáticos.

As interações entre os tipos de popover podem parecer complexas, mas permitem padrões de uso comuns se você usar os tipos nas situações corretas. Se os popovers não estiverem interagindo como esperado, verifique os tipos que você está usando.

Teste seu conhecimento