Chargement…
Infobulles Tooltips En CSS3

Créer Des Infobulles Tooltips En CSS3



Il existe plusieurs tutoriels qui montre comment créer un infobulle très basique en CSS ou avec l’attribut title sur un lien. Dans ce tutoriel, je vais vous montrez comment créer des infobulles Tooltips en CSS3 et des attributs HTML5. L’utilisation des effets de transition CSS3 vont donner un design plus moderne à vos Infobulles.

Infobulles Tooltips En CSS3

Créer Des Infobulles Tooltips En CSS3

Infobulle Basique

Pour créer un infobulle basique sur un lien, on utilise simplement une attribut Title comme suit :

Des Infobulles Tooltips En CSS3 et HTML5

Notre HTML sera vraiment très simple :

Chaque lien d’ancrage (Anchor) est basé sur la classe Tooltip pour afficher les infobulles. Puis en utilise l’attribut data-tool pour afficher le texte des infobulles :

Création des Infobulles (Tooltips)

On applique une visibility:hidden pour cacher le texte des infobulles jusqu’à que le visiteur fais un passage de la souris sur le lien. Vous remarquerez que l’arrière plan (background) utilise l’option rgba() pour être transparent. Le code :before contient le triangle et le code :after contient l’infobulle et le texte est insérer dans la propriété content: attr(data-tool).

Position des Infobulles

On utilise les classes : left (Gauche), right (Droite) et Bottom (En bas) :

Pour les couleurs des infobulles, vous pouvez changer ses lignes :

Conclusion

Les infobulles donnent un design moderne et ajoute une animation supplémentaire à vos pages sans utiliser Flash, Javascript ou jQuery.

Télécharger Code Source

Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



Laisser un commentaire