Dica que gruda no botão e vira para o outro lado se não couber — sem Popper, sem Floating UI.
O que é
O botão ganha um nome de âncora (anchor-name); a dica diz a quem se prender (position-anchor). O navegador posiciona e mantém no lugar ao rolar.
Como funciona
CSS anchor positioning (nos 4 navegadores desde jan/2026) + popover. position-try-fallbacks: flip-block vira a dica para baixo quando falta espaço em cima. O nome da âncora é livre, mas tem que começar com -- e ser único na página.
Exemplos
Quatro lados Ao vivo
Dica em cima
Dica embaixo
Esquerda
Direita
<button style="anchor-name:--ajuda" popovertarget="ajuda">?</button>
<div id="ajuda" popover sw-dica style="position-anchor:--ajuda">
O CPF é usado só para a nota fiscal.
</div>
Atributos
popover sw-dica
dica em cima (padrão)
sw-dica="baixo\|esquerda\|direita"
outro lado
style="anchor-name:--nome" (no botão)
marca o botão como âncora
style="position-anchor:--nome" (na dica)
prende a dica no botão
Variantes
Nenhum.
Eventos
Nenhum.
API (JavaScript)
Nenhum.
Requisitos
swcore.min.css 2.1.0
Limitações — o que ele não faz
Dica que abre ao passar o mouse continua sendo o sw-tooltip; esta abre no clique/toque (melhor no celular).
