Hint.css : tooltips 100% CSS

H

Les tooltips et autres effets de rendu visuels sont à la mode. Anciennement, on passait par Javascript pour obtenir ce type d’effet. Aujourd’hui, CSS 3 réduit peu à peu la frontière avec l’interaction client. Démonstration avec la librairie hint.css.

Avec CSS3, les possibilités d’intégration se font plus nombreuses et il est dorénavant assez facile d’obtenir des effets visuels en déployant uniquement du code CSS.

Par exemple, la librairie hint.css permet de créer des infobulles avec effet de transitions qui n’ont rien à envier à certains scripts JS.

Le principe de fonctionnement est très simple puisqu’il suffit d’appeler le fichier hint.css dans une balise link classique :

<link rel="stylesheet" href="hint.css" />

Ensuite, il reste à attribuer la classe éponyme sur l’élément qui doit appeler l’infobulle au survol, l’attribut data-hint permettant de renseigner le texte qui doit être affiché, à la manière d’un attribut title classique :

Hello Sir, <span class="hint hint--bottom" data-hint="Thank you!">hover over me.</span>

Au passage, on peut noter la convention d’écriture utilisée, la syntaxe BEM pour Block Element Modifier, une convention qui présente quelques solides arguments au niveau de la portabilité et de la maintenance (màj : Améliorez votre code CSS avec la syntaxe BEM).

Au final, le rendu est bon actuellement uniquement sur Firefox, seul navigateur a avoir implémenté entièrement la propriété transition. Sur les autres navigateurs, principe de dégradation gracieuse. Enfin, niveau poids c’est d’une légèreté volatile.

Le site de l’éditeur : hint.css

Script à télécharger ici : Dépôt hint.css

A propos de l'auteur

Steve Lebleu

Cross-triathlète, amoureux de nature, de grands espaces et ... d'applications web. Curieux et touche-à-tout, je m'intéresse à tous les aspects du développement d'un projet web. Je suis développeur full stack freelance depuis 2018, principalement sur des piles Javascript.

Ajouter un commentaire