SW Core / CSS / Dica ancorada (sw-dica)

Dica ancorada (sw-dica) CSS

Balãozinho de explicação que abre no clique e fica grudado no botão — feito pelo próprio navegador, sem JavaScript.

O que é

É aquele "?" ao lado de um campo ou preço: a pessoa toca e aparece uma frase curta explicando ("O CPF é usado só para a nota fiscal"). Tocou fora, fecha. Você escreve um botão, um <div popover sw-dica> com o texto, e liga os dois por um nome. O balão fica colado no botão mesmo quando a página rola, e se não couber em cima ele vira para baixo sozinho.

É só CSS — usa dois recursos novos do navegador: o popover (abre e fecha pelo atributo popovertarget do botão, fecha ao tocar fora ou apertar Esc) e o posicionamento por âncora (o botão ganha um nome com anchor-name e o balão diz a quem se prender com position-anchor). Esses dois nomes você escreve numa regra de CSS da sua página. O balão tem a cor invertida do tema: escuro no tema claro e claro no escuro.

Quando usar

Explicar um campo do formulário ("Para que vocês querem meu CPF?") — botão "?" ao lado do rótulo.
Detalhar um valor no carrinho ou na tabela de planos ("O frete é calculado pelo CEP").
Ícone de informação num painel administrativo, sem ocupar espaço fixo na tela.
No celular: como abre no toque, funciona bem onde não existe "passar o mouse". Se você quer dica que abre ao passar o mouse, use o Tooltip.

Comece aqui

1
Coloque o SW Core no <head>. A dica é só CSS: não precisa do arquivo de JavaScript.
```
<link rel="stylesheet" href="swcore/swcore.min.css">
```

Escreva o botão (com popovertarget apontando para o id da dica) e a dica com popover sw-dica. Depois, no CSS da página, dê um nome ao botão e prenda a dica nele. O nome é livre, mas começa com dois tracinhos (--) e não pode repetir na página.

O CPF é usado só para emitir a nota fiscal.

<button id="cpf-btn" sw-btn="ghost rnd p" popovertarget="cpf-ajuda" aria-label="Por que pedimos o CPF?">
  <i class="swi-help-circle"></i>
</button>
<div id="cpf-ajuda" popover sw-dica>O CPF é usado só para emitir a nota fiscal.</div>

<style>
  #cpf-btn   { anchor-name: --cpf; }      /* dá um nome ao botão */
  #cpf-ajuda { position-anchor: --cpf; }  /* prende a dica nesse nome */
</style>

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.

1. Lado onde a dica aparece

Sem valor, a dica abre em cima. Escreva o lado dentro do sw-dica para mudar. Clique nos botões dos quadros para abrir.

Dica em cima do botão

sw-dica — em cima (padrão)

<button id="dc-b1" sw-btn="pri p" popovertarget="dc-d1">Em cima</button>
<div id="dc-d1" popover sw-dica>Dica em cima do botão</div>
<style>
  #dc-b1 { anchor-name: --dc-b1; }
  #dc-d1 { position-anchor: --dc-b1; }
</style>

Dica embaixo do botão

sw-dica="baixo"

<button id="dc-b2" sw-btn="pri p" popovertarget="dc-d2">Embaixo</button>
<div id="dc-d2" popover sw-dica="baixo">Dica embaixo do botão</div>
<style>
  #dc-b2 { anchor-name: --dc-b2; }
  #dc-d2 { position-anchor: --dc-b2; }
</style>

À esquerda

sw-dica="esquerda"

<button id="dc-b3" sw-btn="pri p" popovertarget="dc-d3">Esquerda</button>
<div id="dc-d3" popover sw-dica="esquerda">À esquerda</div>
<style>
  #dc-b3 { anchor-name: --dc-b3; }
  #dc-d3 { position-anchor: --dc-b3; }
</style>

À direita

sw-dica="direita"

<button id="dc-b4" sw-btn="pri p" popovertarget="dc-d4">Direita</button>
<div id="dc-d4" popover sw-dica="direita">À direita</div>
<style>
  #dc-b4 { anchor-name: --dc-b4; }
  #dc-d4 { position-anchor: --dc-b4; }
</style>

2. Tipos de gatilho

O gatilho pode ser qualquer <button>: com texto ou só com ícone. O que liga tudo é o popovertarget. Botão só com ícone precisa de aria-label.

Preencha como está no documento.

Ícone "?" redondo

<button id="dc-b5" sw-btn="ghost rnd p" aria-label="Ajuda" popovertarget="dc-d5"><i class="swi-help-circle"></i></button>
<div id="dc-d5" popover sw-dica>Preencha como está no documento.</div>
<style>
  #dc-b5 { anchor-name: --dc-b5; }
  #dc-d5 { position-anchor: --dc-b5; }
</style>

O frete é calculado pelo CEP.

Ícone de informação, dica embaixo

<button id="dc-b6" sw-btn="ghost rnd p" aria-label="Sobre o frete" popovertarget="dc-d6"><i class="swi-info-circle"></i></button>
<div id="dc-d6" popover sw-dica="baixo">O frete é calculado pelo CEP.</div>
<style>
  #dc-b6 { anchor-name: --dc-b6; }
  #dc-d6 { position-anchor: --dc-b6; }
</style>

Você escolhe o horário e recebe a confirmação no WhatsApp.

Botão com texto

<button id="dc-b7" sw-btn="out p" popovertarget="dc-d7">Como funciona?</button>
<div id="dc-d7" popover sw-dica>Você escolhe o horário e recebe a confirmação no WhatsApp.</div>
<style>
  #dc-b7 { anchor-name: --dc-b7; }
  #dc-d7 { position-anchor: --dc-b7; }
</style>

Tabela de opções

Palavra	O que faz	Exemplo
Na dica (o balão)
`popover`	Atributo do HTML que transforma o bloco em balão: fica escondido até o botão abrir. Obrigatório.	`<div popover sw-dica>`
`sw-dica`	Visual do SW Core (cor invertida do tema, canto discreto, entrada suave). Sem valor = em cima.	`sw-dica`
`baixo`	Abre embaixo do botão.	`sw-dica="baixo"`
`esquerda`	Abre à esquerda do botão.	`sw-dica="esquerda"`
`direita`	Abre à direita do botão.	`sw-dica="direita"`
`id`	Nome da dica, para o botão saber qual abrir.	`id="ajuda-cpf"`
No botão (o gatilho)
`popovertarget`	Atributo do HTML: abre/fecha a dica com esse id ao clicar.	`popovertarget="ajuda-cpf"`
`aria-label`	Obrigatório quando o botão é só ícone: diz ao leitor de tela o que ele faz.	`aria-label="Ajuda"`
No CSS da sua página (liga os dois)
`anchor-name`	Dá um nome ao botão. Começa com `--`, único na página.	`#cpf-btn { anchor-name: --cpf; }`
`position-anchor`	Prende a dica no botão com aquele nome.	`#cpf-ajuda { position-anchor: --cpf; }`

Receitas prontas — usos reais

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

Formulário: "por que vocês pedem isso?" ao lado do rótulo Ao vivo

CPF

Usamos o CPF só para emitir a nota fiscal. Não enviamos propaganda.

<div sw-fld>
  <label for="cpf" class="flx alc gap-1">CPF
    <button type="button" id="cpf-btn" sw-btn="ghost rnd pp" popovertarget="cpf-ajuda" aria-label="Por que pedimos o CPF?">
      <i class="swi-help-circle"></i>
    </button>
  </label>
  <input sw-inp id="cpf" inputmode="numeric" placeholder="000.000.000-00">
</div>
<div id="cpf-ajuda" popover sw-dica>Usamos o CPF só para emitir a nota fiscal. Não enviamos propaganda.</div>

<style>
  #cpf-btn   { anchor-name: --cpf; }
  #cpf-ajuda { position-anchor: --cpf; }
</style>

Carrinho: explicar o frete Ao vivo

Frete R$ 18,90

Calculado pelo seu CEP. Acima de R$ 199 o frete é grátis.

<div class="flx j-sb alc gap-3">
  <span class="flx alc gap-1">Frete
    <button type="button" id="frete-btn" sw-btn="ghost rnd pp" popovertarget="frete-ajuda" aria-label="Como o frete é calculado">
      <i class="swi-info-circle"></i>
    </button>
  </span>
  <strong>R$ 18,90</strong>
</div>
<div id="frete-ajuda" popover sw-dica="baixo">Calculado pelo seu CEP. Acima de R$ 199 o frete é grátis.</div>

<style>
  #frete-btn   { anchor-name: --frete; }
  #frete-ajuda { position-anchor: --frete; }
</style>

Painel: legenda de um número Ao vivo

Taxa de conversão

3,8%

De cada 100 visitas, quantas viraram pedido.

<div sw-card="p">
  <div class="sw-card-bdy">
    <div class="flx alc gap-1 t-mut">Taxa de conversão
      <button type="button" id="conv-btn" sw-btn="ghost rnd pp" popovertarget="conv-ajuda" aria-label="O que é taxa de conversão">
        <i class="swi-help-circle"></i>
      </button>
    </div>
    <strong class="t-pri">3,8%</strong>
  </div>
</div>
<div id="conv-ajuda" popover sw-dica="direita">De cada 100 visitas, quantas viraram pedido.</div>

<style>
  #conv-btn   { anchor-name: --conv; }
  #conv-ajuda { position-anchor: --conv; }
</style>

Eventos

toggle (na dica)

Evento normal do HTML: dispara quando a dica abre ou fecha. event.newState vale "open" ou "closed".

API (JavaScript)

elemento.showPopover()

Abre a dica por código (método do próprio navegador).

elemento.hidePopover()

Fecha a dica por código.

elemento.togglePopover()

Abre se estiver fechada, fecha se estiver aberta.

Precisa de quê

swcore.min.css — o visual da dica.
swcore.compl.min.css — só se usar ícone swi-* no botão.
Navegador atual (Chrome, Edge, Firefox e Safari de 2026). Em navegador antigo a dica ainda abre, mas pode aparecer fora do lugar.

Cuidados — erros comuns

Esquecer o CSS com anchor-name / position-anchor: a dica abre, mas no meio da tela, longe do botão.
Usar o mesmo nome de âncora (--ajuda) em dois botões: todas as dicas vão grudar no último. Um nome diferente para cada par.
O popovertarget tem que ser igual ao id da dica, letra por letra.
Dentro de um <form>, coloque type="button" no botão da dica — senão ele envia o formulário.
Botão só com ícone precisa de aria-label.
Texto longo não cabe em dica (ela tem no máximo 28rem de largura). Para explicação grande, use um Popover ou Dialog.

O que ele não faz

Abre no clique/toque, não ao passar o mouse. Para abrir no passar do mouse use o Tooltip (sw-tooltip).
Só a dica de cima e a de baixo trocam de lado sozinhas quando não cabem. As de esquerda e direita não viram.
O SW Core não liga a dica ao botão automaticamente: o par anchor-name/position-anchor é sempre seu.
Não tem setinha apontando para o botão.

← AnteriorModal nativo (sw-dialog) Próximo →Sanfona nativa (sw-sanfona)