C'est maintenant possible avec hint.css !
hint.css est une bibliothèque pure CSS qui permet de créer des tooltips.
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.


Source : thechangelog.com
Et vous ?


Vous avez lu gratuitement 6 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.