Archives de Tag: Infobulle

Infobulle en CSS

Petite astuce pour créer des infobulles en CSS sans se prendre trop la tête.
Dans cet exemple, je l’utilise dans un <tr>

La partie HTML :

<td class="infobulle">
    Mon texte ...
    <span>Mon texte qui apparaîtra dans l'infobulle !!!!! </span>
</td>

La partie CSS :

.infobulle
{
    position: relative;
    z-index: 24;
    text-decoration: none;
}

.infobulle:hover
{
    z-index: 25;
}

.infobulle span
{
    display: none;
}

.infobulle:hover span
{
    display: block;
    position: absolute;
    top: 2em;
    left: 2em;
    color: #000;
    background-color: #eeeeee;
    word-wrap : break-word;
    width : 300px;    
}

Source