Pendant des années, positionner un tooltip ou un dropdown exactement sous son élément déclencheur a nécessité du JavaScript : calculer les coordonnées, gérer le scroll, détecter les bords de l'écran, recalculer au resize. Des bibliothèques entières (Floating UI, Popper.js) existent pour résoudre ce problème. Depuis mi-2026, CSS peut le faire nativement grâce à l'API Anchor Positioning, désormais disponible dans Chromium et Firefox.
Le concept en une image
L'idée est simple : on déclare qu'un élément est une ancre avec la propriété anchor-name, puis on positionne un second élément (le tooltip, le popover) en référence à cette ancre avec la fonction anchor().
/* L'élément déclencheur devient une ancre */
.button-info {
anchor-name: --btn;
}
/* Le tooltip se positionne relativement à l'ancre */
.tooltip {
position: absolute;
position-anchor: --btn;
/* Aligne le bord bas du tooltip avec le bord haut du bouton */
bottom: anchor(top);
/* Centre horizontalement sur l'ancre */
left: anchor(center);
transform: translateX(-50%);
margin-bottom: 8px;
}La magie : si le bouton scroll avec la page, le tooltip suit automatiquement. Si l'ancre est trop proche du bord de l'écran, position-try-fallbacks peut basculer automatiquement le tooltip de l'autre côté.
Le positionnement adaptatif automatique
C'est là que l'API devient vraiment intéressante. Floating UI passait beaucoup de code à détecter si le dropdown allait déborder du viewport pour le repositionner. CSS le fait maintenant nativement avec position-try-fallbacks :
.dropdown {
position: absolute;
position-anchor: --trigger;
/* Position par défaut : en dessous */
top: anchor(bottom);
left: anchor(left);
/* Si ça déborde : essaie au-dessus */
position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}flip-block inverse l'axe vertical (dessus vs dessous), flip-inline inverse l'axe horizontal (gauche vs droite). Le navigateur essaie chaque fallback dans l'ordre et garde le premier qui rentre dans le viewport.
Compatibilité en 2026
Chrome 125+ et Edge 125+ (depuis mai 2024), Firefox 133+ (depuis novembre 2024) supportent l'essentiel de l'API. Safari reste en retrait : un flag expérimental est disponible dans Safari 18, mais pas encore activé par défaut. Pour une utilisation en production aujourd'hui, un @supports s'impose :
@supports (anchor-name: --test) {
/* Anchor positioning disponible */
.tooltip { /* version CSS native */ }
}
Pour Safari et les vieux navigateurs, le fallback classique (JavaScript ou Floating UI) reste nécessaire. Mais pour les apps qui ciblent un public majoritairement Chromium/Firefox (outils internes, apps B2B), le passage au CSS pur est désormais viable.
Ce que ça change concrètement
Moins de JavaScript, moins de dépendances, moins de recalculs au scroll et au resize. Les tooltips et popovers CSS-only sont aussi généralement plus performants : pas de calcul JavaScript sur le thread principal, pas d'écouteurs d'événements à gérer manuellement. Pour les composants UI simples (tooltips d'info, menus de contexte, autocomplete), Anchor Positioning est maintenant la solution la plus légère disponible.
- CSS Anchor Positioning — MDN Web Docs, 2026
- Compatibilité navigateurs — Can I Use, 2026
- Guide pratique Anchor Positioning — Chrome for Developers, 2024
