Menu, aviso e painel (sw-popover) CSS

O que é

O navegador tem um recurso próprio para "caixinhas que abrem por cima de tudo": o atributo popover. Um botão com popovertarget="id" abre e fecha a caixa; ela fecha sozinha com a tecla Esc ou clicando fora, e funciona com teclado e leitor de tela. O sw-popover dá a roupa do SW Core e a animação de entrada, em três formatos prontos: menu (lista de links embaixo do botão), toast (aviso no canto de baixo) e painel (gaveta lateral com o fundo escurecido).

São três peças: o botão (popovertarget="meu-id"), a caixa (id="meu-id" popover sw-popover="menu") e nada mais. O navegador cuida de abrir, fechar e deixar por cima de tudo; o SW Core cuida do visual, que segue o tema claro/escuro. Em navegador sem a animação de entrada, a caixa abre e fecha sem animar — continua funcionando.

Quando usar

• Menu do usuário no topo (Meu perfil, Configurações, Sair): sw-popover="menu".
• Aviso rápido ("Salvo!", "Copiado!", "Item no carrinho"): sw-popover="toast".
• Filtros da loja, carrinho, menu no celular: gaveta lateral sw-popover="painel".
• Precisa que a caixa fique colada no botão? Use a Dica ancorada ou o Dropdown. Precisa de confirmação que bloqueia a página? Use o Modal nativo.

Comece aqui

1. 1

   Coloque o SW Core no <head>. O sw-popover está no arquivo principal. Não precisa de JavaScript.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Um botão aponta para o id da caixa com popovertarget. A caixa leva popover (do navegador) e sw-popover com o formato. Clique — e clique fora ou aperte Esc para fechar.

   Mostrar aviso

   Horário salvo!

   <button sw-btn="pri" popovertarget="aviso">Mostrar aviso</button>
   <div id="aviso" popover sw-popover="toast"><i class="swi-check-circle"></i> Horário salvo!</div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<header class="flx j-sb alc">
  <strong>Minha Loja · Painel</strong>
  <button sw-btn="ghost" popovertarget="menu-usuario"><i class="swi-user-circle"></i> Ana</button>
</header>
<div id="menu-usuario" popover sw-popover="menu">
  <a href="/perfil"><i class="swi-user"></i> Meu perfil</a>
  <a href="/pedidos"><i class="swi-package"></i> Meus pedidos</a>
  <a href="/config"><i class="swi-cog"></i> Configurações</a>
  <button popovertarget="menu-usuario"><i class="swi-log-out"></i> Sair</button>
</div>

<button sw-btn="pri" id="copiar"><i class="swi-copy"></i> Copiar chave Pix</button>
<div id="copiado" popover="manual" sw-popover="toast"><i class="swi-check-circle"></i> Chave Pix copiada!</div>

<script>
  const aviso = document.getElementById('copiado');
  document.getElementById('copiar').addEventListener('click', () => {
    navigator.clipboard.writeText('12.345.678/0001-90');
    aviso.showPopover();                          // abre
    setTimeout(() => aviso.hidePopover(), 2500);  // fecha em 2,5 s
  });
</script>

<button sw-btn="suc" popovertarget="carrinho"><i class="swi-cart"></i> Carrinho (2)</button>
<div id="carrinho" popover sw-popover="painel">
  <h3 class="mt-0">Seu carrinho</h3>
  <p class="flx j-sb"><span>Sapato social</span><strong>R$ 239,00</strong></p>
  <p class="flx j-sb"><span>Kit viagem</span><strong>R$ 149,00</strong></p>
  <p class="flx j-sb bd-t bd-mut pt-3"><span>Total</span><strong>R$ 388,00</strong></p>
  <div class="flx gap-2">
    <button sw-btn="ghost" popovertarget="carrinho">Continuar comprando</button>
    <a href="/checkout" sw-btn="suc">Finalizar</a>
  </div>
</div>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css (2.1.0 ou mais novo) — o visual e a animação.
• swcore.compl.min.css — só se usar os ícones swi-* dentro.
• O abrir/fechar é do navegador: funciona em Chrome, Edge, Firefox e Safari atuais. A animação de entrada só aparece nos que já suportam; nos outros abre sem animar.

Cuidados — erros comuns

• sw-popover sem menu, toast ou painel abre no meio da tela — bom para um aviso rápido; para caixa grande com formulário, prefira o Modal nativo.
• O menu só fica embaixo do botão quando é aberto pelo popovertarget desse botão. Aberto por código (showPopover()), ele não sabe de qual botão veio e vai para o canto de cima à direita da janela.
• popovertarget só funciona em <button> (e <input type="button">). Num <a> ou <div> não faz nada.
• O id do botão e o da caixa têm que ser iguais e únicos na página. Dois elementos com o mesmo id = o botão abre o errado.
• Não escreva só sw-popover sem o atributo popover: sem ele a caixa não abre nem esconde (o sw-popover é só o visual).
• O toast não some sozinho. Para sumir depois de alguns segundos, use as 3 linhas da receita "Copiado!" — ou o componente SWAlert, que já faz fila de avisos.

O que ele não faz

• O painel sai só pela direita. Não há versão pela esquerda.
• Não há fila de avisos nem tempo automático — é uma caixa só. Para isso existe o SWAlert.
• Não prende o foco dentro nem trava a rolagem da página (o Modal nativo faz isso).
• O menu embaixo do botão usa o "posicionamento por âncora" do navegador (Chrome e Edge atuais e os que já suportam). Nos outros, o menu abre no canto de cima à direita da janela — continua funcionando.