[CSS] Hint.CSS – biblio de Tooltips en CSS

Si vous ne souhaitez pas avoir à ajouter une bibliothèque Javascript ou un Plugin jQuery supplémentaire pour afficher vos tooltips, Hint.css est, comme son nom l’indique, une solution 100% CSS. Les tooltips peuvent être mis dans de multiples directions et styles.

La ressource combine subtilement classes CSS et attributs data-* pour afficher vos tooltips.

Hello Sir, hover over me.

Avec la classe hint–DIRECTION vous pouvez contrôler l’endroit ou devra s’afficher la bulle, et dans l’attribut data-hint, le texte à afficher.

Plusieurs styles sont prédéfinis : Bulles d’erreur, bulles d’infos, bulles de confirmation … et un mode tooltip toujours affichée.

Vous pourrez télécharger la version Sass ou directement le CSS prêt à emploi.

Des effets de transitions donnent un effet réussi aux tooltips sur navigateurs modernes, et sont bien dégradées sur tous les autres navigateurs.

hint-css

Source