CSS Anchor Tooltip Pro
Infobulles accrochées à leur bouton par CSS Anchor Positioning : elles changent de côté au bord de la fenêtre, se ferment avec Échap et restent lisibles partout.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque bouton .atp-btn est suivi de son infobulle .atp-tip dans un .atp-pair qui fixe la direction voulue : atp-top, atp-bottom, atp-left ou atp-right. L'infobulle s'affiche au survol du bouton ou de l'infobulle elle-même, et au focus clavier (:focus-visible), avec un fondu de 0,18 s ; cachée, elle est en visibility: hidden.
Quand le navigateur connaît CSS Anchor Positioning, le script donne à chaque bouton un nom d'ancre unique (anchor-name) et l'attache à son infobulle (position-anchor). L'infobulle passe alors en position: fixed avec position-area : elle suit son bouton partout dans la page et, si la fenêtre manque de place de ce côté, position-try-fallbacks la retourne de l'autre (haut ↔ bas, gauche ↔ droite). À chaque ouverture, le script note le côté réel dans data-atp-side pour placer la petite flèche du bon côté.
Sans Anchor Positioning (navigateurs plus anciens) ou sans JavaScript, la même infobulle est placée en position: absolute autour de son bouton, du côté prévu, sans changement de côté. Échap ferme l'infobulle ouverte sans bouger la souris ni le focus ; elle revient quand on quitte puis retrouve le bouton.
Accessibilité
- Reliée à son bouton : le script donne un identifiant unique à chaque infobulle et l'indique dans
aria-describedbydu bouton. Le lecteur d'écran lit le nom du bouton puis sa description. - Vraiment cachée au repos :
visibility: hiddenretire les infobulles fermées de la lecture ; la description reste disponible pararia-describedby. - Fermable et survolable (WCAG 1.4.13) : Échap la ferme ; la souris peut passer du bouton à l'infobulle pour la lire ou sélectionner son texte, sans qu'elle disparaisse.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, plus de glissement de 4 px, seulement un fondu. - Toucher : un appui sur le bouton affiche l'infobulle (survol simulé par le navigateur), un appui ailleurs la referme en général. Ne mettez pas d'information indispensable seulement dans une infobulle : sur mobile, elle reste discrète.
Compatibilité navigateur
CSS Anchor Positioning (anchor-name, position-area, position-try-fallbacks) : Chrome 129, Firefox 147, Safari 26 ; avant, repli automatique sur le placement simple. Largeur maximale en unités de conteneur (cqw) : Chrome 105, Firefox 110, Safari 16. Environ 2 Ko de JavaScript pour les noms d'ancre, aria-describedby, Échap et la flèche. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : 4 directions dans 2 copies, changement de côté aux bords de la fenêtre, repli forcé sans Anchor Positioning, Échap au survol et au focus, passage de la souris sur l'infobulle, code collé deux fois, toucher, 390 px, mouvement réduit, 0 erreur.
Sans Anchor Positioning ou sans JavaScript, l'infobulle reste du côté prévu même près d'un bord, où elle peut déborder. Sans JavaScript, il n'y a ni aria-describedby ni fermeture par Échap.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0787-root">
<div class="atp-demo">
<div class="atp-pair atp-bottom">
<button class="atp-btn" type="button">Bas</button>
<p class="atp-tip" role="tooltip">Sous le bouton…</p>
</div>
<div class="atp-pair atp-right">…</div>
<div class="atp-pair atp-left">…</div>
<div class="atp-pair atp-top">…</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Direction (HTML — classe de .atp-pair) |
atp-top, atp-bottom, atp-left, atp-right |
Côté préféré de l'infobulle ; elle passe du côté opposé si la fenêtre manque de place (avec Anchor Positioning). |
Couleurs (CSS — --tip-bg, --tip-fg) |
#6d5efc et #fff |
Fond et texte de l'infobulle et de sa flèche ; réglables sur la racine ou sur une seule paire. |
Écart (CSS — --tip-offset) |
10px |
Distance entre le bouton et l'infobulle. Au-delà de 14 px, le passage de la souris vers l'infobulle devient moins sûr. |
Largeur maximale (CSS — --tip-width) |
min(220px, 44cqw) |
Au-delà, le texte passe à la ligne. Ajoutez white-space: nowrap pour des étiquettes courtes sur une ligne. |
Démo en croix (HTML/CSS — .atp-demo) |
4 boutons autour d'un centre vide | Retirez ce conteneur dans votre page : les paires fonctionnent n'importe où dans la racine. |
FAQ
aria-describedby. Seul le changement de côté près d'un bord manque : près du bord de la fenêtre, l'infobulle peut alors déborder.position: fixed et se place par rapport à la fenêtre, donc un parent qui coupe son contenu ne la rogne pas (sauf s'il porte un transform ou un filter). En mode de repli, elle est en position: absolute et peut être coupée.role="tooltip") ne contient que du texte, et on ne peut pas y amener le focus. Pour des liens ou des boutons, utilisez une fenêtre contextuelle ouverte au clic.
