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

Publicités

Une réponse à “Infobulle en CSS

  1. Pingback: Raccourcir un texte en Razor | Balton

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s