CSS Anchor Positioning: Tooltips e Popovers sem JavaScript

Posicionar um tooltip, um menu ou um popover em relação a outro elemento sempre exigiu JavaScript calculando posições, listeners de scroll e resize. O CSS Anchor Positioning traz essa capacidade para o próprio CSS, sem nenhuma linha de JavaScript.

Como funciona?

O processo tem duas partes: primeiro, o elemento "âncora" recebe um nome com anchor-name. Depois, o elemento que será posicionado usa position-anchor para se referenciar a essa âncora e a função anchor() para calcular a posição:

.botao {
    anchor-name: --meu-botao;
}

.tooltip {
    position: fixed;
    position-anchor: --meu-botao;
    top: anchor(bottom);
    left: anchor(center);
}

Com isso, o .tooltip se posiciona automaticamente logo abaixo e centralizado em relação ao .botao, mesmo que a página role ou a janela seja redimensionada.

Exemplo prático: tooltip

<button class="botao" popovertarget="dica">Ajuda</button>
<div id="dica" popover class="tooltip">Essa é uma dica de ajuda.</div>

Combinado com a Popover API (popover e popovertarget), dá para montar um tooltip funcional sem nenhum JavaScript.

Posições alternativas com position-try

Quando não há espaço suficiente na tela para exibir o elemento na posição definida, é possível declarar posições alternativas com position-try-fallbacks, e o navegador escolhe automaticamente a que couber melhor:

.tooltip {
    position-try-fallbacks: flip-block, flip-inline;
}

Quando usar

• Tooltips, popovers e menus suspensos posicionados em relação a outro elemento.
• Dropdowns que precisam se ajustar automaticamente quando não há espaço na tela.
• Qualquer componente flutuante que hoje depende de bibliotecas JavaScript de posicionamento.

Compatibilidade

Essa é uma funcionalidade recente e ainda em expansão entre navegadores. Vale sempre checar o suporte antes de usar em produção, principalmente se o projeto precisar suportar navegadores mais antigos.

caniuse

Conclusão

O CSS Anchor Positioning aponta para um futuro em que boa parte do posicionamento dinâmico que hoje depende de JavaScript pode ser resolvido só com CSS. Ainda vale acompanhar a evolução do suporte nos navegadores, mas já é um ótimo momento para começar a experimentar.