Pas besoin de connaitre des script complexes pour créer des infobulles sympathiques, vous allez voir qu’en moins de 2 minutes vous pouvez créer des infobulles en utilisant uniquement le HTML et le CSS :

Prenons l’exemple d’un lien :

voici donc le code de votre page HTML :

Votre lienMessage à afficher au survol du lien

Et maintenant voici le code de votre fichier de style (css) :

a.tooltip span {
        font-size: 10px;
        position:absolute;
        z-index: 999;
        white-space:nowrap;
        bottom:9999px;
        left: 50%;
        background:#000;
        color:#e0e0e0;
        padding:0px 7px;
        line-height: 24px;
        height: 24px;

        opacity: 0;
        transition:opacity 0.4s ease-out;
        }       

a.tooltip span::before {
        content: "";
        display: block;
        border-left: 6px solid #000000;
        border-top: 6px solid transparent;
        position: absolute;
        top: -6px;
        left: 0px;
        }

a.tooltip:hover span {
        opacity: 1;
        bottom:-35px;
        }

Et voici donc le résultat :