Une infobulle s'inscrit au passage de la souris sous forme d'un texte encadré et donne l'explication du croquis.
Le code comprend du html, en bleu et du CSS, en marron, compris entre les balises <style></style>.
CODE
<p><a class="info" href="#"><img src="http://data.over-blog-kiwi.com/1/30/51/51/20160121/ob_20de96_blog.jpg" /><span>VOICI, A MON SENS, LE MEILLEUR MONTAGE ET JE LE PRECONISE EN TOUTES CIRCONSTANCES.</span>
<style type="text/css">a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
a.info:hover{
z-index:25;
background-color:#FFF
}
a.info span{
display: none
}
a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}
</style>
</a></p>
RESULTAT
AVEC LA POINTE DE LA SOURIS
Haut de page