Infobulle

Le texte de l’infobulle vit dans un attribut de données et est dessiné par un pseudo-élément : il n’y a donc aucun script, rien à positionner à l’exécution et rien qui traîne dans le DOM. Elle apparaît au survol et au focus clavier, dont s’occupe la moitié :focus-within de la règle.

Infobulle de base

stack({ direction: 'row', gap: 'md' },
  tooltip({ content: 'Copier dans le presse-papiers' },
    iconButton({
      label: 'Copier',
      variant: 'soft',
      color: 'neutral',
      icon: icon('copy'),
    }),
  ),
  tooltip({ content: 'Reconstruire le site' },
    button({ variant: 'outline', color: 'neutral' }, 'Reconstruire'),
  ),
)

Placement

Au-dessus par défaut, en dessous quand il n’y a pas la place au-dessus.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Au-dessus du déclencheur' },
    button({ variant: 'soft', color: 'neutral' }, 'Haut'),
  ),
  tooltip({ content: 'En dessous du déclencheur', placement: 'bottom' },
    button({ variant: 'soft', color: 'neutral' }, 'Bas'),
  ),
)

Noms accessibles

Le texte de l’infobulle est décoratif — il est dessiné depuis la propriété CSS content, que les lecteurs d’écran n’annoncent pas de façon fiable. Le contrôle à l’intérieur a toujours besoin de son propre nom accessible, ce que fournit le label d’iconButton(). Quand l’infobulle dit quelque chose que le nom du contrôle ne dit pas, passez label: true pour le répéter dans un span masqué visuellement.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Déploie en production immédiatement', label: true },
    button({ color: 'danger' }, 'Déployer'),
  ),
)

Sur du texte

Une infobulle enveloppe du contenu en ligne aussi volontiers qu’un bouton.

text(
  'Le build écrit dans ',
  tooltip({ content: 'Configurable avec outDir' }, code('dist/')),
  ' et nulle part ailleurs.',
)

Quand ne pas en mettre

Les infobulles n’apparaissent pas au toucher et s’évanouissent dès que le pointeur s’en va. Tout ce qu’un lecteur doit absolument avoir — un message d’erreur, l’explication d’un champ obligatoire — a sa place dans le texte help du champ lui-même, pas dans une infobulle.

Props