CSS Anchor Positioning: tooltips e dropdowns sem JavaScript

Toda vez que você precisou posicionar um tooltip, um dropdown ou um popover do lado certo do elemento que o disparou, foi ao JavaScript buscar ajuda. getBoundingClientRect(), cálculo de scroll, lógica para não sair da viewport — e tudo isso para mover um elemento de lugar.

A CSS Anchor Positioning API elimina esse trabalho. Você declara um elemento como âncora e o CSS faz o resto.

O problema clássico

Tooltips vivem no DOM em locais arbitrários, mas precisam aparecer ao lado de um elemento específico. Antes, a solução era:

Ouvir o evento de hover/click
Chamar getBoundingClientRect() no elemento alvo
Calcular posição levando em conta scroll da página
Aplicar position: fixed com top e left via JavaScript
Lidar com casos de borda na borda da viewport

Com Anchor Positioning, você escreve CSS.

Conceito básico

Dois novos mecanismos: declarar a âncora e referenciar a âncora.

/* 1. Declara o elemento como âncora */
.btn-ajuda {
  anchor-name: --btn-ajuda;
}

/* 2. Posiciona o tooltip em relação à âncora */
.tooltip {
  position: absolute;
  position-anchor: --btn-ajuda;

  /* cola a borda superior do tooltip na borda inferior da âncora */
  top: anchor(bottom);
  /* centraliza horizontalmente */
  left: anchor(center);
  translate: -50% 0;
}

Sem JavaScript. Sem event listener. O browser calcula a posição e atualiza automaticamente quando o layout muda.

A função `anchor()`

A função anchor() resolve para a posição de uma borda específica da âncora. Os valores disponíveis são:

Valor	Resolve para
`anchor(top)`	Borda superior da âncora
`anchor(bottom)`	Borda inferior da âncora
`anchor(left)`	Borda esquerda da âncora
`anchor(right)`	Borda direita da âncora
`anchor(center)`	Centro horizontal ou vertical

Posicionamento automático com `position-try-fallbacks`

O que realmente elimina a lógica JavaScript é o posicionamento automático. Você define as posições preferidas e o browser escolhe a que cabe na viewport:

.tooltip {
  position: absolute;
  position-anchor: --btn-ajuda;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;

  /* se não couber abaixo, tenta acima */
  position-try-fallbacks: flip-block;
}

flip-block inverte o eixo vertical. flip-inline inverte o eixo horizontal. Você pode combinar os dois, ou definir posições customizadas com @position-try:

@position-try --tooltip-esquerda {
  top: anchor(center);
  right: calc(anchor(left) - 8px);
  translate: 0 -50%;
}

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

Sem âncora no mesmo parent

Um detalhe importante: âncora e elemento posicionado não precisam estar no mesmo pai no DOM. Isso é o que torna a API tão poderosa — você pode ter o tooltip no final do <body> (para evitar problemas de overflow: hidden) e ainda assim posicioná-lo relativo a qualquer elemento da página.

<button class="btn-ajuda">?</button>

<!-- em qualquer lugar do DOM -->
<div class="tooltip" role="tooltip">
  Texto de ajuda aqui
</div>

Suporte e fallback

Chrome 125+ tem suporte completo. Para browsers sem suporte, use @supports:

@supports (anchor-name: --test) {
  .tooltip {
    position: absolute;
    position-anchor: --btn-ajuda;
    top: anchor(bottom);
  }
}

/* fallback: JavaScript ou position manual */
@supports not (anchor-name: --test) {
  .tooltip {
    position: fixed;
    /* JS ainda cuida disso */
  }
}

Quando já faz sentido usar

Para projetos que rodam exclusivamente em Chrome/Edge (intranets, dashboards internos, apps Electron): use agora sem ressalvas.

Para sites públicos: implemente como progressive enhancement. A experiência base com JavaScript ainda funciona, e os usuários com suporte ganham a versão CSS-only.

CSS Anchor Positioning é uma das adições mais práticas ao CSS em anos. Quando o suporte Firefox/Safari chegar ao nível do Chrome, boa parte dos utilitários de posicionamento de tooltips vai se tornar obsoleta — e isso é ótimo.