Le code HTML

Tout d'abord, inserez dans votre page, le code suivant : 

<a class="infobulle" href="#">texte<span>infobulle</span></a>

Placez votre le texte à la place du mot 'texte'. Et placez le contenu de l'infobulle entre les balises .
Voilà en ce qui concerne le code HTML.

Rappel : n'oubliez pas d'appeler la feuille de style entre vos balises <head></head>


Le code CSS

a.infobulle {
    /* on définit le lien présent dans la balise info */
    position: relative;
    color: blue;
    font-style : italic;
    text-decoration: none;
}
a.infobulle span {
    /* on cache l'infobulle */
    display: none;
}
a.infobulle:hover {
    /* aucun arrière plan */
    background: none;
    /* On définit une valeur pour que l'info bulle s'affiche au dessus du texte */
    z-index: 10;
}

a.infobulle:hover span {
    /* on affiche l'infobulle en ligne */
    display: inline;
    /* on définit la position du block */
    position: absolute;
    /* on change la valeur de la propriété white-space pour éviter les retours à la ligne */
    white-space: nowrap;
    /* on positionne notre infobulle */
    top: 30px;
    left: 20px;
    /* couleur de l'arrière plan */
    background-color: white;
    /* couleur du texte */
    color: blue;
    /* marge interne */
    padding: 3px;
    /* bord de l'info bulle */
    border: 1px solid blue;
    border-left: 3px solid blue;
}