Une info-bulle est un petit panneau qui doit suivre un élément spécifique et rester visible. Le faire rouler à la main signifie faire défiler les auditeurs, les calculs de serrage de la fenêtre d'affichage et une guerre d'index z. Le positionnement de l'ancre rend la relation déclarative : nommez l'ancre, attachez le suiveur, choisissez une région. Popover gère gratuitement le rejet lors d'un clic extérieur et l'empilement de la couche supérieure.

<button class="pin" popovertarget="tip">?</button>
<div id="tip" class="tip" popover>Available after 5 PM</div>
.pin { anchor-name: --help-pin; }
.tip {
  position: fixed;
  position-anchor: --help-pin;
  position-area: top;
  margin-bottom: 0.4rem;
}

Comment les pièces se composent

  • Anchor-name marque l'élément d'ancrage ; position-anchor y lie le suiveur.
  • position-area sélectionne l'endroit où vit le suiveur par rapport à l'ancre : haut, bas et combinaisons avec centre ou travée.
  • Le navigateur bascule automatiquement du côté opposé lorsque la région choisie pousse le suiveur hors de l'écran.
  • L'attribut popover fournit le comportement d'ouverture-fermeture, le rejet de la lumière et le placement de la couche supérieure, donc aucun z-index n'est saisi nulle part.

Porte-le, ne le devine pas

@supports (anchor-name: --test) {
  /* anchored layout lives here */
}

L'anchor positioning est arrivé dans les moteurs actuels au fil de 2026, avec Safari 27 qui apportait des anchors sensibles au transform et des keywords de visibilité ensuite affinés en 27.0 et 27.2. Enveloppez quand même la fonction dans un @supports : en dehors, la page n'a simplement pas de tooltip, ce qui reste digne comparé à un tooltip mal ancré. Testez le clavier et le lecteur d'écran une fois, car l'attribut popover en fait plus qu'il n'en a l'air, et il fait l'essentiel correctement.

La partie la plus intéressante est la suppression : pas d'écouteurs de défilement, pas de calcul de serrage, pas d'arcs modaux de JavaScript. Une relation, indiquée en CSS, vérifiée par le navigateur.