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'info-bulle de base

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

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

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

.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;
}
div {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
width: 0px;
}
CSS de l'info-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 :

<a href="" title="L'info-bulle finale" class="tooltip"><span title="">Tooltip CSS3 final</span></a>
L'info-bulle finale

voici le résultat :

Pour enregistrer le code sur une autre page cliquez ici

 

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 :

<a href="">Un tooltip gris<span>Info-bulle gris</span></a>
Lien info-bulle avec span

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

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; 
}
CSS de 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 :

span.blue{
	background:rgba(41,137,216, 0.75);
	border:1px solid #1E5799;
}
CSS de l'info-bulle bleue

voici le résultat :

Cliquez ici pour enregistrer le code sur une autre page

 

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

  • apparaitre un info bulle html (1)
  • balise html pour creer des bulles pdf (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 :
google space
Google comme vous ne l’avez jamais vu.

Si vous avez quelques minutes à perdre en vous amusant avec Google, cet article devrait vous intéressé. Vous avez l’habitude...

set_boutons
17 générateurs de boutons gratuits.

Il existe plusieurs manières de créer un bouton dans une page web. On peut utiliser une image sur laquelle on...

lien vers ancre dans page
Comment créer des liens vers des ancres dans une page web ?

Vous avez peut-être un jour eu envie de faire un lien vers un point précis de votre article ? Où...

Fermer