Affiche une information contextuelle brève, non interactive, quand l'utilisateur survole ou focus un élément cible. Implémente WCAG 1.4.13 (Content on Hover or Focus) : la bulle reste accessible quand le pointeur se déplace du trigger vers la bulle. Le contenu doit rester non-interactif (spec ARIA role="tooltip"). Pour du contenu riche ou cliquable, utiliser ar-dropdown.
aria-describedby pointant vers l’élément <ar-tooltip> lui-même (light DOM). Les IDREF ne franchissent pas la frontière shadow DOM — référencer la bulle interne rendrait la description invisible aux lecteurs d’écran. L’hôte étant toujours présent dans le DOM, la description est disponible dès le focus, même quand la bulle est visuellement fermée.role="tooltip" et popover="manual".Escape ferme immédiatement le tooltip sans déplacer le focus.prefers-reduced-motion: reduce est actif.aria-label.<abbr>, une <span> ou tout élément sans focus natif, ajoutez tabindex="0" pour que le tooltip soit atteignable au clavier.ar-dropdown à la place.show-delay="0" sur des déclencheurs très proches les uns des autres — des tooltips qui surgissent à chaque micro-survol dégradent l’expérience.Les exemples de cette page sont affichés avec le thème neutre du starter-kit.
Passez l'ID du trigger via `trigger-id`. La bulle s'affiche après `show-delay` ms (300 par défaut) et se masque après `hide-delay` ms (150 par défaut).
<button id="tt-default" class="ar-btn ar-btn-secondary">Survolez-moi</button>
<ar-tooltip trigger-id="tt-default">Texte d'aide contextuelle</ar-tooltip>Toutes les valeurs Floating UI sont supportées — `top`, `bottom`, `left`, `right` et leurs variantes `-start`/`-end`. Le composant bascule automatiquement si l'espace est insuffisant.
<div style="display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;padding:2rem 0;">
<button id="tt-top" class="ar-btn ar-btn-secondary">top</button>
<ar-tooltip trigger-id="tt-top" placement="top">Placement top</ar-tooltip>
<button id="tt-bottom" class="ar-btn ar-btn-secondary">bottom</button>
<ar-tooltip trigger-id="tt-bottom" placement="bottom">Placement bottom</ar-tooltip>
<button id="tt-left" class="ar-btn ar-btn-secondary">left</button>
<ar-tooltip trigger-id="tt-left" placement="left">Placement left</ar-tooltip>
<button id="tt-right" class="ar-btn ar-btn-secondary">right</button>
<ar-tooltip trigger-id="tt-right" placement="right">Placement right</ar-tooltip>
</div>Ajoutez `without-arrow` pour supprimer le caret directionnel — utile quand le tooltip est suffisamment proche du trigger ou dans un contexte visuel dense.
<button id="tt-no-arrow" class="ar-btn ar-btn-secondary">Sans caret</button>
<ar-tooltip trigger-id="tt-no-arrow" without-arrow>Tooltip sans caret</ar-tooltip>Cas d'usage classique — `<abbr>` n'est pas interactif nativement, donc `tabindex="0"` est nécessaire pour que le tooltip soit accessible au clavier.
Le composant suit WCAG 1.4.13 pour garantir la persistance au survol.
<p style="font-size:1rem;">
Le composant suit
<abbr id="tt-wcag" tabindex="0" style="cursor:help;text-decoration:underline dotted;">WCAG 1.4.13</abbr>
pour garantir la persistance au survol.
</p>
<ar-tooltip trigger-id="tt-wcag">Web Content Accessibility Guidelines — critère 1.4.13 : Content on Hover or Focus</ar-tooltip>Complète un bouton sans libellé textuel — le tooltip joue le rôle de description visible. Attention, il ne remplace pas un `aria-label` sur le bouton lui-même.
<button id="tt-icon" class="ar-btn ar-btn-secondary" aria-label="Paramètres" style="width:2.5rem;height:2.5rem;padding:0;font-size:1.1rem;">⚙</button>
<ar-tooltip trigger-id="tt-icon">Paramètres du compte</ar-tooltip>`show-delay` et `hide-delay` contrôlent les temporisations en ms. Valeurs par défaut : 300 ms / 150 ms (conformes WCAG 1.4.13). Ici `show-delay="0"` pour une réponse immédiate.
<button id="tt-fast" class="ar-btn ar-btn-secondary">Réponse immédiate</button>
<ar-tooltip trigger-id="tt-fast" show-delay="0" hide-delay="0">Apparaît sans délai</ar-tooltip>L'attribut `disabled` bloque tout déclenchement sans modifier le DOM du trigger. Utile pour désactiver dynamiquement le tooltip selon le contexte.
<button id="tt-disabled" class="ar-btn ar-btn-secondary">Hover (tooltip désactivé)</button>
<ar-tooltip trigger-id="tt-disabled" disabled>Ce texte ne s'affichera pas</ar-tooltip>Manipulez les attributs pour voir le code et la preview se mettre à jour.
<button id="pg-tt-default" class="ar-btn ar-btn-secondary">Survolez-moi</button>
<ar-tooltip trigger-id="pg-tt-default">Texte d'aide contextuelle</ar-tooltip>Si vous utilisez l'autoloader, les composants détectés dans la pages sont chargés automatiquement, donc pas besoin de les importer individuellement.
Pour un import manuel, voici comment vous y prendre.
Importez ce composant depuis le CDN.
<script type="module" src="https://unpkg.com/@ariane-ui/core/dist/components/tooltip/index.js"></script>Après avoir installé le paquet via npm, vous pouvez importer le composant ainsi :
import '@ariane-ui/core/dist/components/tooltip/index.js';ID du trigger dans le light DOM. Requis.
Placement Floating UI (12 valeurs, ex: "top", "bottom-start").
Délai avant affichage en ms (WCAG 1.4.13).
Délai avant masquage en ms (WCAG 1.4.13).
Supprime le caret.
Désactive complètement le tooltip.
Texte du tooltip.
detail : { id: string | undefined }Émis après l'affichage effectif de la bulle.
detail : { id: string | undefined }Émis après le masquage effectif de la bulle.
Utilisez ::part(name) pour styler ces éléments depuis l'extérieur.
Certaines parts indiquent un rôle transverse, partagé avec d'autres composants — voir Personnalisation avancée.
Racine du composant.
Le caret directionnel.
Fond de la bulle (repli système `Canvas` si aucun thème n'est chargé).
Couleur du texte (repli système `CanvasText` si aucun thème n'est chargé).
Rayon de bordure de la bulle.
Espacement interne de la bulle.
Taille de police du texte de la bulle.
Interligne du texte de la bulle.
Taille du caret.
Durée de l'animation d'apparition de la bulle (cascade vers --ar-panel-show-duration).
Espacement entre le trigger et la bulle.
Décalage latéral de la bulle. Pas d'events show/hide annulables : un tooltip n'a pas de raison métier de bloquer son affichage (contrairement à un dialog ou un menu), contrairement à ar-dropdown/ar-dialog/ar-breadcrumb.