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

risus. elit. leo Praesent ut venenatis Praesent