Tooltip

La bulle est un vrai élément que le CSS révèle. Elle apparaît donc au survol et au focus clavier, et elle est liée au terme par aria-describedby : un lecteur d'écran l'annonce au lieu de l'ignorer.

Au survol, au clavier

Survolez le terme à la souris, ou atteignez-le avec la touche Tab.

La générationTransformer les sources en pages HTML prêtes à servir. produit un dossier complet, et la versionToutes les pages d'une version de la documentation. en est la racine.

La <Tooltip text="Transformer les sources…">génération</Tooltip> produit un dossier.

Les quatre côtés

Survolez-les : hautAu-dessus, basEn dessous, gaucheÀ gauche et droiteÀ droite.

<Tooltip text="À droite" placement="right">
  terme
</Tooltip>

Le côté se choisit selon la place disponible : top par défaut, bottom quand le terme est en haut de la page, left ou right dans une colonne étroite.

Sur un terme technique

Utile pour expliquer un identifiant sans alourdir la phrase.

Le champ baseUrlPréfixe de déploiement, déduit du sous-chemin de siteUrl quand il n'est pas écrit. préfixe chaque lien interne, et currentVersion servie par défaut. Au plus une. désigne celle que sert la racine.

Le champ <Tooltip text="Préfixe de déploiement."><code>baseUrl</code></Tooltip> préfixe les liens.

Dans un tableau

Dans une carte

Une carte ne coupe pas ce qui dépasse : la bulle en sort.

Un texte long

La bulle est plafonnée à environ seize rem de large, puis passe à la ligne.

Voyez la raison des branches de versionUne version publiée reste dans l'état où elle a été produite. La regénérer n'est jamais nécessaire, et rien ne garantirait qu'elle donne le même résultat des années plus tard. pour le détail.

L'apparence par className

Un className se pose sur le terme, pas sur la bulle : c'est le terme que le lecteur voit avant de survoler quoi que ce soit.

Un terme marqué plus nettementIl porte maintenant la couleur d'accent, et une graisse plus forte. que les autres.

<Tooltip className="text-indigo-500 font-medium" text="…">
  plus nettement
</Tooltip>

style fonctionne de la même façon, pour un ajustement ponctuel qui ne demande aucune classe.

Ce qu'elle ne peut pas faire

La bulle est positionnée en absolu : dans un conteneur qui coupe son débordement — un overflow: hidden — elle sera coupée. C'est la limite d'une infobulle sans JavaScript, et elle est assumée : placer la bulle hors du flux demanderait un script sur chaque page.

Les composants livrés évitent ce découpage partout où ils le peuvent — une Card arrondit les coins de son image un à un plutôt que de couper son contenu.

La bulle ne se ferme pas avec la touche Échap : l'écouter demanderait un script, et les composants n'en chargent aucun. Elle disparaît quand le pointeur ou le focus quitte le terme.

Un Tooltip sans texte arrête la génération : un survol sans effet passe longtemps inaperçu. Un côté inconnu aussi.

Une infobulle explique un terme sans quitter la phrase. Une remarque qui demande sa propre place est une Admonition.