Voici encore un petit tuto basique, on pourrais dire que c'est déjà un peu plus dur que les autres mais pourtant, aussi simple. Plus tard, on augmentera les difficulters
Donc, il vous faut un minimum de connaissance en CSS, je ferai un petit tuto avec les CSS basiques et un autre pour les CSS rares et assez complexe à comprendre.

Exemple d'une infobulle :
<iframe src="http://univermario.creer-forum.com/h112-test-infobulle" style="width:600px;height:275px;border: 0px;"> </iframe>

Voici le code :

Code:

<style type"text/css">
a{
     color:#000;              
font-family:Courier;
}
a:hover,a:focus{
     background:rgba(0,0,0,.4);
     box-shadow:0 1px 0 rgba(255,255,255,.4);
}
a span{
     position:absolute;  
 margin-top:23px;
     margin-left:-35px;
background:url('http://www.bzho.com/CIEL/ciel-bleu.jpg');
opacity:0.5;
 border:1px dashed black;
border-radius:4px;
transform:scale(0) rotate(-12deg);
transition:all .25s;
opacity:0;
box-shadow: 1px 1px 12px #555;


}


a:hover span, a:focus span{
     transform:scale(1) rotate(0);
      opacity:1;
}
</style>
<table><td><p>
     <a href="#"><img src="http://i14.servimg.com/u/f14/18/07/45/56/qui_es10.png"/>

<span>Qui est en ligne petit padawan ? Blablabla
  <br /> Blablabla
  <br />Blablabla
  </span>
     </a>
  </p></td>
  </table>

Si vous voulez modifier la couleurs du texte et la police, vous modifiez

Code:

a{
     color:#000;              
font-family:Courier;
}

Si vous voulez enlever le fond de l'infobulle, remplacez :

Code:

a span{
     position:absolute;  
 margin-top:23px;
     margin-left:-35px;
background:url('http://www.bzho.com/CIEL/ciel-bleu.jpg');
opacity:0.5;
 border:1px dashed black;
border-radius:4px;
transform:scale(0) rotate(-12deg);
transition:all .25s;
opacity:0;
box-shadow: 1px 1px 12px #555;


}

par :

Code:

a span{
position:absolute;  
margin-top:23px;
margin-left:-35px;
transform:scale(0) rotate(-12deg);
transition:all .25s;
opacity:0;
box-shadow: 1px 1px 12px #555;
}

Box shadow est l'ombre. Si vous voulez modifier la couleurs, modifiez "#555"

Pour écrire votre texte, remplacez seulement le texte que j'ai mis. "Qui est en ligne jeune padawan ..."
Surtout ne supprimez pas < span> ou < td> ou < table> ou < a> (surtout celui là, sinon, votre code va buguer a mort) et < p>

[Les barres espaces sont fait exprès pour pas faire lagger mon tuto.]

Pour pouvoir mettre votre infobulle sur un topic, il vous faudrat faire une ifram. [Tuto #05]