Créer sa propre info-bulle en CSS

I. Introduction
II. Info-bulle avec fond coloré
II-A. Partie (X)HTML
II-B. Partie CSS
II-C. Exemple d'utilisation
III. Info-bulle avec fond imagé
III-A. Partie (X)HTML
III-B. Partie CSS
III-C. Exemple d'utilisation
IV. Conclusion
V. Remerciements

• Dans nos développements Web, il se peut que nous voulions afficher un bloc d'information au survol d'un lien. Malheureusement, l'attribut title de l'élément ne permet que d'afficher quelques mots et rien d'autres.
• Suite à l'insuffisance de cette balise, je vous propose une méthode purement CSS qui nous permettra non seulement d'afficher un paragraphe mais également n'importe quel élément du moment qu'il soit un enfant de (par exemple : une image, un champ texte (input), etc.). Nous aurons ainsi une info-bulle personnalisée.
• Avant de commencer, je vous suggère de jeter un oeil à cet outil qui vous permettra de connaitre les balises enfants que la balise peut contenir. Ceci vous donnera une idée des possibilités de contenu de vos bulles d'informations.
• Dans ce tutoriel nous verrons deux méthodes. La première consistera à créer une info-bulle avec une simple couleur comme arrière-plan, la deuxième, elle, contiendra une image.