Générateur de tooltip CSS
Choisissez la position et le style, puis survolez les boutons de l’aperçu avec la souris (ou avec Tab). Le code n’utilise pas JavaScript.
Mode d’emploiUne info-bulle au survol de la souris
Disponible en: 
Générateur de tooltip CSS: à quoi ça sert
Un tooltip est la courte info-bulle qui apparaît au survol d’un bouton ou d’une icône. Ce générateur crée l’info-bulle uniquement en CSS, dans les quatre positions, avec une flèche facultative, des couleurs, des coins et un délai pour qu’elle ne clignote pas quand la souris ne fait que passer.
Le code est accessible : l’info-bulle est reliée au bouton par aria-describedby, a role=tooltip, apparaît aussi quand l’élément reçoit le focus au clavier ou au toucher et respecte les personnes qui préfèrent moins de mouvement. L’aperçu comporte trois boutons pour tester.
Mode d’emploi
- Choisissez la position, les couleurs et les coins.
- Réglez le délai et la flèche.
- Copiez le HTML et le CSS.
Quand l’utiliser
- Expliquer des icônes sans texte.
- Astuces dans les formulaires.
- Boutons d’action dans des tableaux de bord.
Questions fréquentes
Le tooltip fonctionne-t-il sur mobile ?
Sur mobile, le survol n’existe pas ; l’info-bulle apparaît quand l’élément reçoit le focus, en touchant un bouton ou un lien. Ne mettez donc pas dans le tooltip une information indispensable : elle doit aussi figurer dans le texte de la page.
Comment le rendre accessible ?
Le texte de l’info-bulle se trouve dans un élément avec role=tooltip relié au bouton par aria-describedby, pour que le lecteur d’écran le lise avec le nom du bouton. Il apparaît aussi au focus clavier (focus-visible) et ne dépend pas que de la couleur.
Pourquoi y a-t-il un délai avant l’affichage ?
Un court délai évite que les info-bulles clignotent quand la souris ne fait que passer au-dessus en allant ailleurs. Pour disparaître, l’effet est immédiat.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.