Faire une info-bulle facilement en css

Petite astuce pour faire facilement une info-bulle en CSS en quelque ligne et donner pour ajouter de la précision a votre Webdesign et diriger le visiteur vers un une info.

Le design info-bulle

Un simple rectangle avec une flèche mais un design qui reste efficace.
Procédé graphique très souvent utilisé pour donner un effet de dialogue sms, en bulle de bande dessinée…
Pour en faire quelque chose de sympa, il faut l’utiliser cette astuce sur un :hover, ou avec a ajout de class en JavaScript.

Les pseudo éléments

comme vu dans l’article sur les ombres avancées, les pseudo éléments (::after, ::before) sont très utile vous vous éviter d’ajouter des images de design général dans votre code HTML et pour cette petite astuce cela va nous servir à créer la petite flèche collée a votre bulle.

Passons à la pratique

cette petite astuce est tirée d’un tuto de grafikart