Comment créer une info-bulle CSS3 simple

Les info-bulles sont un excellent moyen de montrer plus d'informations à vos utilisateurs en survolant simplement une image ou un texte. Ils peuvent être utilisés, par exemple, pour fournir des légendes pour des images, ou des descriptions plus longues pour des liens, ou toute information utile qui améliorerait l'expérience utilisateur de votre site, sans empiéter sur la conception.

Aujourd'hui, je vais vous montrer comment créer une info-bulle simple en utilisant HTML et CSS pour afficher la balise de titre de vos hyperliens.

Commençons par créer un simple balisage pour le lien. Nous devons lui donner un titre qui sera le contenu de l'info-bulle, et lui assigner une classe:

CSS3 Tooltip

L'étape suivante consiste à créer un style rudimentaire pour notre classe d'info-bulle:

.tooltip{display: inline;position: relative;}

Nous affichons maintenant notre infobulle en ligne avec notre lien en utilisant un positionnement relatif. Ensuite, nous voulons créer une boîte arrondie pour former le corps de l'info-bulle, et la positionner de sorte qu'elle flotte au-dessus du lien:

.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;}

Nous utilisons le sélecteur: hover qui sélectionne un élément, en l'occurrence notre lien, au survol et au sélecteur: après, qui insère le contenu après l'élément sélectionné. Nous avons spécifié un arrière-plan noir avec une opacité de 80%, et pour les navigateurs ne prenant pas en charge les couleurs RGBA, nous avons fourni un arrière-plan gris foncé.

Les coins légèrement arrondis sont créés à l'aide de l'attribut border-radius et nous avons défini la couleur du texte en blanc. Enfin, nous avons positionné la boîte à outils à gauche du lien et ajouté un peu de remplissage.

En plus du style et du positionnement, nous avons défini la propriété content:

content: attr(title);

Cette propriété nous permet d'insérer le contenu que nous voulons, qui peut être une chaîne, un fichier multimédia ou un attribut de l'élément. Dans ce cas, nous utilisons l'attribut title du lien.

Maintenant, lorsque vous survolez votre lien, une info-bulle devrait apparaître au-dessus avec le texte que vous définissez comme titre de lien. Nous avons un problème cependant, les informations sur le titre sont affichées deux fois: une fois dans l'info-bulle et une fois par le navigateur. Pour résoudre ce problème, nous devons modifier légèrement notre code HTML:

Info-bulle CSS3 

Ce que nous avons fait ici est d’envelopper le texte du lien dans une balise span avec son propre attribut de titre. Maintenant, le navigateur affichera le jeu de titres dans la balise span lorsque le lien est survolé.

Pour finir, nous ajouterons une flèche au bas de l’infobulle pour lui donner une petite touche de style. Nous faisons cela en utilisant le sélecteur: before et certains styles de bordure:

.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;}

Nous utilisons ici quelques hacks de bordure pour créer l'effet d'une flèche: définir les couleurs des bordures à gauche et à droite pour qu'elles soient transparentes et contrôler les largeurs des bordures. Nous avons également positionné la flèche pour qu'elle se trouve au bas de la boîte à outils.

Et voilà, une info-bulle simple avec la balise de titre de l'élément survolée. Vous pouvez également l'utiliser pour les balises alt d'image, ou même simplement mettre votre propre texte dans le CSS pour apparaître où vous voulez.

Vous pouvez voir un démo de travail ici .

Comment construisez-vous les info-bulles? Avez-vous utilisé cette technique sur un site? Faites le nous savoir dans les commentaires.

Image / vignette en vedette, image de conseil via Shutterstock.