Un tooltip est une petite bulle d'information qui apparait lorsque l'on survole un élément HTML avec sa souris.
Grâce à cette bibliothèque vous n'avez plus besoin de JavaScript pour créer et personnaliser vos tooltips !
À la place hint.css utilise l'attribut data-*, les pseudo éléments, la propriété content et les transitions CSS3. De plus la bibliothèque utilise la convention de nommage BEM.
Pour l'utiliser rien de plus simple : il suffit de télécharger une des deux versions disponibles et d'inclure la feuille de style dans votre page Web.
Ensuite il suffit de passer le contenu du tooltip dans l'attribut data-hint de votre élément :
Code : | Sélectionner tout |
Hello Sir, <span class="hint hint--bottom" data-hint="Thank you!">hover me.</span>
Pour plus d'informations ou encore voir des exemples je vous invite à consulter le site du projet.
Télécharger hint.css.
Télécharger hint.css en version minifiée.
Source : thechangelog.com
Et vous ?
Avez-vous déjà implémenté des tooltips dans vos formulaires ?
L'utilisation de JavaScript est-elle un frein pour vos développements ?