Des tooltips ou info-bulles en css3 : 3 méthodes simples

Les Tooltips ou info-bulles sont de petites bulles informatives qui apparaissent au passage de la souris sur des liens ou des images. En plus d’être très esthétiques, les tooltips sont aussi utiles pour informer l’utilisateur sans surcharger la page de texte informatif.

Il existe une multitude de techniques pour réaliser des info-bulles, certaines utilisant JavaScript ou d’autres méthodes plus ou moins complexes. Dans cet article, nous nous concentrerons sur des tooltips réalisés uniquement en CSS3.

Sommaire :

1. Utilisation de l’attribut « title » dans le lien.

2. Utilisation d’une balise « span ».(le plus simple)

3. D’autres méthodes toutes faites.

infobulles

1. Utilisation de l’attribut « title » dans le lien.

La première idée qui vient à l’esprit pour créer une infobulle est d’utiliser l’attribut title des balises <a> ou <img>. Prenons l’exemple ci-dessous :

<a title="Exemple de tooltips">Info-bulle</a>

L’infobulle qui apparaît au passage de la souris est très simple, mais aussi très moche. On est donc tenté de d’utiliser la pseudo-classe hover, pour styliser l’attribut « titre ». Voici un exemple de tooltip mettant à profit cette pseudo-classe :

Code HTML


Le code CSS3 ci-dessous. La partie css avec « div » est une astuce pour afficher le petit triangle en dessous de la bulle.

Le problème de cette méthode, c’est que l’info-bulle de base s’affiche en même temps que l’info-bulle que l’on vient de créer. Pour faire disparaître cette infobulle disgracieuse supplémentaire, il faut utiliser un second attibut « title », par exemple dans une balise <span>, mais celui-ci sera vide.

Voici les nouvelles balises HTML à utiliser :


Le résultat final

 

2. Utilisation d’une balise « span ».

La méthode est intéressante, mais on peut se poser la question de savoir s’il est intéressant d’utiliser l’attribut « title », puisque par la suite, on cherche à l’éliminer avec une balise <span>.

La seconde idée sera donc de ne pas utiliser l’attribut « title », mais de styliser directement une balise span dans le lien à infobulle.

Avec la propriété display:none; on cache la balise span, puis on la fait apparaître au passage sur le lien avec a:hover span{ display:block; }.

Voici le code du lien du tooltips :

Le code CSS3 pour faire apparaître et disparaître l’info-bulle :

C’est étonnant de simplicité et d’efficacité.

Pour modifier la couleur, il suffit d’ajouter une classe à la balise <span> et de change le background.

Voici un exemple avec un fond bleu :

<a href="">Un tooltip bleu<span class="blue">Info-bulle bleu</span></a>

Le CSS suivant doit être ajouté au précédent :

Le résultat final

 

3. D’autres méthodes toutes faites.

Il existe des méthodes simples, nécessitant moins de codes pour obtenir des info-bulles de compétition.

  • Tout d’abord, le framework HTML et CSS Bootstrap propose un ensemble de tooltips prédéfinis. Le seul problème vient de la taille des fichiers utilisés qui risquent de ralentir le chargement de votre page. Par ailleurs, vous aurez aussi besoin de jQuery pour que tout ceci fonctionne.
  • Hint-CSS est une petite bibliothèque CSS qui donne simplement de jolies info-bulles sans  difficultés et avec de nombreuses options. A tester avant d’urgence.

Cet article sur les info-bulles se termine. N’hésitez pas à le partager ou à apporter votre contribution au sujet.

 Télécharger l’article au format pdf : pdf-25

Les recherches qui vous ont mené ici

  • logiciel editeur html (2)
  • apparaitre un info bulle html (1)
  • info bulle php pdf (1)
Ces articles pourraient vous intéresser :
One Comment

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lire plus :
xnView
XnView : un freeware pour visualiser et convertir tous les fichiers graphiques.

Voici un logiciel pour visualiser et convertir les fichiers graphiques et vraiment très simple d'emploi ! Il s'agit de XnView. XnView permet...

couverture_outils-web
Comment créer et changer une couverture Facebook ?

La TimeTime FaceBook, c'est-à-dire sa couverture est la première chose que remarque un internaute en arrivant sur une page Facebook....

dashlane
3 logiciels gratuits pour gérer les mots de passe

Les mots de passe, c'est la vraie galère : soit on utilise toujours le même et on risque de se...

Fermer