Programmation

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.

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 :

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

Info-bulle

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 ».

On peut modifier l’attribut “title” de la balise <a> au survol avec le code suivant :

Code HTML

1
<a href="" title="L'info-bulle + son double" class="tooltip">Tooltip stylisé avec CSS3 + infobulle par défaut</a>

CODE CSS3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

Le résultat est le suivant :

Tooltip stylisé avec CSS3 avec infobulle par défaut

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 : 

1
<a href="" title="L'info-bulle finale" class="tooltip"><span title="">Tooltip CSS3 final</span></a>
Voici le résultat final :

Tooltip CSS3 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 : 

1
<a href="">Un tooltip gris<span>Info-bulle gris</span></a>

Le code CSS3 pour faire apparaître et disparaître l’info-bulle (à mettre entre les balises <style></style>) : 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a span{	
	display:none;
	color:#fff;
	background:rgba(51,51,51,0.75);
	padding:20px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	width:100px;
	text-align:center;
	position: absolute;
	z-index:10;
}
a { 
	display: inline-block;
}
a:hover span{ 
	display:block; 
}
Le résultat du tooltip

Un tooltip grisInfo-bulle gris



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

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

Voici un exemple avec un fond bleu : 

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

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

1
2
3
4
span.blue{
	background:rgba(41,137,216, 0.75);
	border:1px solid #1E5799;
}
Le résultat avec un tooltip bleu :

Un tooltip bleuInfo-bulle bleu


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.
Partager