Créer une info bulle en css 2

Comment créer une info bulle avec l'utilisation du CSS. texte du lienVoici une infobulle plutot sympa

Code css dans votre feuille de style

a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 20px;
    left: -10px;
    padding: 5px;
    color: #000;
    border: 1px solid #bbb;
    background: #ffc;
    width:170px;
}
a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 15px;
    height: 7px;
    width: 11px;
    background: transparent url(image-infobulle.gif);
    margin:0;
    padding: 0;
    border: 0;
}

Code html

<a href="#" class="tooltip">texte du lien<em><span></span>Votre texte de l'infobulle</em></a>

Note

Pensez à récupérer cette image sur votre serveur -> 

Catégorie CSS