Adieu Popper.js ?

Si vous avez déjà codé un Design System, vous connaissez la douleur des "Tooltips". Il faut calculer la position du bouton, ajouter la hauteur, centrer l'élément flottant, et recalculer le tout si l'utilisateur scrolle ou redimensionne la fenêtre. C'est pour cela que nous dépendions de librairies lourdes en JavaScript.

En ce mois de novembre 2025, le CSS Anchor Positioning API est enfin mature.

Le concept

L'idée est simple : lier sémantiquement deux éléments du DOM via CSS, peu importe où ils se trouvent dans la structure HTML.

1. L'Ancre (La cible)

On définit un nom d'ancre sur l'élément de référence (le bouton).

.trigger-btn {
  /* On nomme l'ancre */
  anchor-name: --mon-tooltip-trigger;
}

2. L'élément positionné (Le tooltip)

On dit à l'élément flottant de se baser sur cette ancre.

.tooltip {
  position: absolute;
  /* On lie l'élément à l'ancre définie plus haut */
  position-anchor: --mon-tooltip-trigger;
  
  /* Nouveauté magique : position-area (anciennement inset-area) */
  /* Place l'élément en haut et au centre de l'ancre */
  position-area: top center;
  
  /* Un peu de marge */
  margin-bottom: 10px;
}

Le "Responsive" automatique

Le plus puissant, c'est la gestion des bords d'écran. Avec la propriété position-try, le navigateur déplace automatiquement le tooltip si l'espace manque.

.tooltip {
  /* Si pas de place en haut, essaie en bas, puis à droite */
  position-try-fallbacks: flip-block, flip-inline;
}

Et l'Accessibilité dans tout ça ?

Attention piège ! L'Anchor Positioning est purement visuel. Ce n'est pas parce que visuellement votre tooltip est collé à votre bouton que le lecteur d'écran le sait.

Pour une accessibilité robuste, combinez cette technique CSS avec l'attribut HTML popover :

<button 
  popovertarget="my-tooltip" 
  class="trigger-btn"
  aria-describedby="my-tooltip"
>
  Survolez-moi
</button>

<div 
  id="my-tooltip" 
  popover 
  class="tooltip" 
  role="tooltip"
>
  Information importante
</div>

Pourquoi ce combo est gagnant ?

1. HTML (popover) : Gère l'apparition/disparition et le "Top Layer" (z-index infini).
2. CSS (anchor) : Gère la géométrie sans une ligne de JS.
3. ARIA : aria-describedby assure le lien sémantique pour les non-voyants.

C'est le web qu'on aime : performant, déclaratif et accessible.