Infobulle

L’infobulle partagée rattache un court contexte non interactif à un déclencheur atteignable au clavier. Le CSS gère le survol et le focus; le JavaScript ciblé ajoute l’ouverture au toucher ainsi que la fermeture à l’extérieur et avec Échap.

Exemple#

Temps de réponse Mesuré à la périphérie de l’application.

Quand l’utiliser#

• Utilisez une infobulle pour un court indice qui précise un contrôle, une abréviation ou une valeur tronquée
• Ne placez jamais une information essentielle uniquement dans une infobulle; la page doit fonctionner sans elle
• Pas pour du contenu interactif — des liens ou des boutons dans la bulle exigent un panneau dépliant, pas une infobulle

Implémentation#

{{ partial "tooltip.html" (dict
  "id" "infobulle-temps-reponse"
  "label" "Expliquer le temps de réponse"
  "trigger" "Temps de réponse"
  "content" "Mesuré à la périphérie de l’application."
) }}

Omettez trigger pour rendre l’icône d’information par défaut. Le déclencheur pointe vers l’infobulle au moyen de aria-describedby; le script ne gère que l’état de fermeture explicite et ne déplace jamais le focus. Les pages Markdown utilisent le shortcode d’infobulle.

Options#

Accessibilité#

• Le déclencheur est un bouton natif et l’infobulle apparaît au focus clavier autant qu’au survol
• aria-describedby relie le déclencheur au contenu qui porte role="tooltip"
• Échap ferme l’infobulle sans déplacer le focus; toucher le déclencheur ou l’extérieur ferme aussi l’état tactile explicite
• Le contenu de l’infobulle est du texte brut et ne contient aucun contrôle atteignable au clavier