Je vous présente aujourd’hui comment réalisé de jolis info-bulles (tooltip), en utilisant uniquement du CSS.

Avant ça, je vous propose une petite page de démontration.

Vous trouverez ci-dessous le code CSS/HTML mais pour ceux qui préfèrent, je vous propose de télécharger un exemple.

Tout d’abord, voilà le style CSS :

.tooltip {
	border-bottom: 1px dotted #000000; color: #000000; outline: none;
	cursor: help; text-decoration: none;
	position: relative;
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	position: absolute; left: 1em; top: 2em; z-index: 99;
	margin-left: 0; width: 250px;
}
.tooltip:hover img {
	border: 0; margin: -10px 0 0 -55px;
	float: left; position: absolute;
}
.tooltip:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
	display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

Et le code HTML :

Voilà un exemple
<a class="tooltip" href="#">Classique<span class="classic">Ce n'est qu'un exemple de ce que vous pouvez faire en CSS, vous pouvez personnalisez ces bulles !</span></a>,
<a class="tooltip" href="#">Erreur<span class="custom critical"><img src="Critical.png" alt="Error" height="48" width="48" /><em>Erreur</em>Ce n'est qu'un exemple de ce que vous pouvez faire en CSS, vous pouvez personnalisez ces bulles !</span></a>,
<a class="tooltip" href="#">Aide<span class="custom help"><img src="Help.png" alt="Help" height="48" width="48" /><em>Aide</em>Ce n'est qu'un exemple de ce que vous pouvez faire en CSS, vous pouvez personnalisez ces bulles !</span></a>,
<a class="tooltip" href="#">Information<span class="custom info"><img src="Info.png" alt="Information" height="48" width="48" /><em>Information</em>Ce n'est qu'un exemple de ce que vous pouvez faire en CSS, vous pouvez personnalisez ces bulles !</span></a> et
<a class="tooltip" href="#">Attention<span class="custom warning"><img src="Warning.png" alt="Warning" height="48" width="48" /><em>Attention</em>Ce n'est qu'un exemple de ce que vous pouvez faire en CSS, vous pouvez personnalisez ces bulles !</span></a> réalisés 100% en CSS

Cet article a été réalisé grâce au tutoriel trouvé sur sixrevisions.