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, <span class="hint  hint--bottom">hover over me.</span>

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.

Source

Donec Aenean Praesent Praesent venenatis, pulvinar Donec diam