[Css + Html] Mettre une infobulle

Un petit code pour mettre des infobulles sur son forum Smile

Tous d'abord vous devez mettre le code suivant dans votre css :

Code:: a.info { position:relative; background:none; z-index:10; }
a.info:hover { z-index:20; }
a.info span { display:none; }
a.info:hover span { display:block; position:absolute; top:18px; left:10px; padding-left:25px; padding-top:24px; padding-bottom:5px; padding-right:8px; width:205px; height:45px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-style:italic; font-size:10px; color:#000000; text-decoration:none; text-align:justify; }
a.info:hover>span { background-image:url(http://i34.servimg.com/u/f34/11/14/60/21/bginfo10.png); }
a.info:hover span { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://i34.servimg.com/u/f34/11/14/60/21/bginfo10.png", sizingMethod="crop"); }

Enregistrez le, maintenant vous pouvez mettre une infobulle partout sur votre site ou furm en insérant ce code html :

Code:: <a href="le lien" class="info">le texte
<span>la description</span></a>

Remplacez "le texte" par le texte à mettre en surbrillance, c'est à dire celui qu'on doit survoler avec la souris pour que l'info bulle s'affiche.

droite

Remplacez "la description" par le texte à insérer dans l'info bulle

Voici un test :
le texte
la description
Ces codes sont 100% personnalisable si vous connaissez les base du css, sinon n'hésitez pas à poser vos questions sur ce topic Smile