Bonjour,

Voici un code pour créer un tooltip juste en css3, il n'y a aucun effet a vous de les mètres après comme bon vous semble.

HTML:

<a href="#" class="tooltip" title="Mon message de tooltip">Lorem ipsum</a>

CSS3

.tooltip {
    position: relative;
    cursor: pointer;
}
.tooltip:hover:after {
    content: attr(title); /*recupere le message dans le title du lien */
    position: absolute;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-top: 20px;
    margin-left:-40px;
    opacity:1;
    left:40px;
}

Si vous avez des questions n’hésitez pas

2 réponses


Salut, je te conseille d'utiliser Tipsy, un plugin jQuery très facile d'utilisation a la place.

jaa09
Auteur

oui je connais mais le but c'est de le faire via css3 :)

merci comme meme