CSS Anchor Positioning: tooltip, menu e popover “intelligenti” senza JavaScript

Per anni abbiamo risolto con JavaScript (o librerie dedicate) un’esigenza banalissima ma piena di edge case: posizionare un elemento UI (tooltip, menu, popover) in relazione a un altro elemento e mantenerlo “in vista” quando lo spazio scarseggia.

CSS Anchor Positioning sposta questa logica nel browser: definisci un’ancora, “leghi” un elemento posizionato a quell’ancora e lasci che il motore CSS si occupi sia del posizionamento iniziale sia del riposizionamento quando serve (ad esempio per evitare overflow nel viewport).

In termini pratici: meno misure manuali, meno calcoli, meno IntersectionObserver/resize/scroll handler per pattern che dovrebbero essere nativi.

Supporto: cosa aspettarsi

L’API è già disponibile in Chrome 125 e Safari 26 ed è parte di Interop 2025, quindi l’aspettativa realistica è un allineamento cross-browser progressivamente migliore. In produzione conviene comunque prevedere una strategia di fallback (progressive enhancement) per browser non supportati.

1) Definire un’ancora: anchor-name

Qualunque elemento può diventare un’ancora tramite anchor-name, a cui assegni un dashed identifier (un nome che “sembra” una custom property, ma qui è solo un identificatore).

.my-button {
  anchor-name: --action-anchor;
}

2) Collegare l’elemento posizionato: position-anchor

L’elemento che vuoi posizionare (tooltip, menu, ecc.) usa position-anchor per riferirsi all’ancora e resta un normale elemento “positioned” (tipicamente position: absolute).

.my-tooltip {
  position: absolute;
  position-anchor: --action-anchor;
}

Nota sui popover

Se stai usando un popover invocato da un elemento (pattern “invoker → popover”), in alcuni casi l’aggancio è implicito: potresti non dover dichiarare manualmente anchor-name/position-anchor.

3) Posizionare: anchor() sugli inset (top/right/bottom/left)

Il posizionamento avviene tramite la funzione anchor() dentro gli inset.

Esempio: mettere un tooltip sopra l’ancora allineando il bottom del tooltip al top dell’ancora:

.my-tooltip {
  position: absolute;
  position-anchor: --action-anchor;

  bottom: anchor(top);
}

Oppure metterlo a destra dell’ancora, facendo toccare il left del tooltip al right dell’ancora:

.my-tooltip {
  left: anchor(right);
}

Consiglio: preferisci le proprietà logiche

Puoi usare anche gli equivalenti logici (inline/block start/end). Se lavori su UI multilingua o layout che devono adattarsi a writing-mode e direzioni diverse, è un investimento che ripaga.

4) L’alternativa comoda: position-area (griglia 3×3)

position-area è uno shorthand molto espressivo: crea idealmente una griglia 3×3 attorno all’ancora e ti fa scegliere in quale “cella” posizionare l’elemento.

.my-tooltip {
  position: absolute;
  position-anchor: --action-anchor;

  position-area: top center;
}

Dettaglio utile:

• position-area: top center posiziona sopra e centrato.
• position-area: top posiziona sopra ma può estendersi su più colonne (comportamento diverso, utile ad esempio per pannelli larghi).

Span: quando vuoi occupare più celle

Puoi usare la sintassi span-* per estendere l’area (a sinistra/destra o inline/block start/end).

.my-tooltip {
  position-area: top span-left;
}

5) Repositioning automatico: position-try-fallbacks

La parte più interessante è la gestione dei fallback: se la posizione preferita causerebbe overflow (es. tooltip tagliato in alto), il browser può provare alternative.

.my-tooltip {
  position: absolute;
  position-anchor: --action-anchor;
  position-area: top;

  position-try-fallbacks: flip-block, flip-inline;
}

• flip-block prova a ribaltare sopra/sotto.
• flip-inline prova a ribaltare sinistra/destra.

L’ordine conta: il browser prova i fallback da sinistra a destra.

6) Fallback custom: @position-try

I flip predefiniti coprono molti casi, ma non tutti. Pensa a un submenu: di default lo vuoi a destra del menu; su schermi stretti potresti volerlo sotto, non “flipparlo” a sinistra.

Qui entrano in gioco fallback personalizzati:

@position-try --below-menu {
  position-area: bottom;
  /* qui puoi anche aggiustare margini, offset, ecc. */
}

.submenu {
  position: absolute;
  position-anchor: --menu-anchor;
  position-area: right span-bottom;

  position-try-fallbacks: --below-menu, flip-inline;
}

Punti chiave:

• @position-try definisce un “preset” di riposizionamento.
• In position-try-fallbacks puoi mescolare preset custom e fallback built-in.

7) Dimensionare in base all’ancora: anchor-size()

Oltre alla posizione, spesso vuoi che il popover abbia la stessa larghezza del bottone che lo apre. Con anchor-size() lo fai in CSS.

.my-popover {
  width: anchor-size(width);
}

È un tassello piccolo, ma elimina un’altra categoria di misurazioni via JS.

8) Pattern avanzati: “re-anchoring” e indicatori condivisi

Una possibilità interessante è riutilizzare un elemento visivo (un indicatore, un puntatore, un highlight) e ri-agganciarlo a target diversi: action bar, scroll spy, marker di carousel, UI di onboarding. Invece di creare N indicatori, ne muovi uno solo cambiando l’ancora a cui è legato.

9) In arrivo: anchor queries (container queries per i fallback)

C’è un’esigenza pratica che emerge subito con i tooltip: la freccetta (caret) deve cambiare lato quando il tooltip passa da sopra a sotto (o viceversa). L’idea delle anchor queries è poter “interrogare” quale fallback è stato scelto e applicare stili condizionali.

Il meccanismo proposto ruota attorno a:

• container-type: anchored sull’elemento posizionato
• un @container anchored(...) che seleziona in base al fallback attivo

È una parte ancora in evoluzione, ma è il pezzo che renderebbe i componenti ancorati completamente rifiniti senza JS.

10) Nota pratica: animazioni e transizioni

Se vuoi transizioni fluide quando un elemento cambia posizione (per fallback, scroll, resize, o re-anchoring), al momento conviene basarsi su inset (top/right/bottom/left o equivalenti logici).

position-area, invece, non è ancora pensato per interpolazioni animate complete: è comodo e leggibile, ma oggi non è la scelta migliore se l’obiettivo principale è animare il cambio di posizione.

---

Sintesi: quando usarlo davvero

CSS Anchor Positioning è particolarmente efficace per:

• tooltip che non devono mai “tagliarsi” ai bordi del viewport
• menu e submenu che devono riposizionarsi in modo predicibile
• popover allineati e dimensionati sull’elemento invocante
• pattern UI con fallback multipli, senza logiche imperative

L’implicazione pratica è chiara: molti componenti di posizionamento diventano finalmente “CSS-first”, con fallback dichiarativi e logica di collisione gestita dal browser. Risultato: meno codice fragile, meno dipendenze e una UI più coerente al variare di viewport, zoom e contenuti.