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

Un nuovo set di API CSS per agganciare elementi tra loro, gestire i fallback automaticamente e semplificare pattern UI ricorrenti. 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. 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. 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; } 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; } 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. 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); } 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. 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). Puoi usare la sintassi span-* per estendere l’area (a sinistra/destra o inline/block start/end). .my-tooltip { position-area: top span-left; } 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. @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. 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. 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. 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. 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. 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. Articolo originale: https://frontendfacile.it/blog/css-anchor-positioning-tooltip-menu-e-popover-intelligenti-senza-javascript