Tooltip

Le tooltip TDS est CSS pur : la bulle s’affiche via :hover et :focus-within, sans JavaScript. Cette simplicité a une contrepartie assumée : sur écran tactile, il n’existe pas d’équivalent fiable au survol, donc l’information de la bulle ne doit jamais être la seule source d’une information essentielle.

Do / Don’t

✓ Faire

Utiliser pour du contexte additionnel non essentiel (définition d’un terme, précision)
Garder le texte court — une phrase maximum

✗ Éviter

Mettre un message d’erreur de formulaire uniquement dans un tooltip
Mettre un lien ou un bouton à l’intérieur de la bulle

Bulle sombre (neutral.900), texte blanc, positionnée au-dessus du déclencheur avec une petite flèche. Apparition en fondu + léger scale, désactivée si prefers-reduced-motion.

Importation

@import "@tds-tchad/core/components/tooltip/tooltip.css";

import { tooltip } from '@tds-tchad/core/components/tooltip';

Exemple

<span class="tds-tooltip" tabindex="0" aria-describedby="tooltip-numero">
  Numéro de dossier
  <span class="tds-tooltip__bubble" id="tooltip-numero" role="tooltip">
    Identifiant unique attribué à la création de votre demande
  </span>
</span>