Infobulle au-dessus d'un menu

Bonsoir !

Je réalise en ce moment le reloockage d'un site. Mon problème est que j'ai eu à réorganiser le menu gauche du site ici par la page suivante . Mon problème est que je souhaite ajouter une info-bulle au passage de la souris.
je me suis inspiré du tutoriel ici mais
j'arrive pas afficher l'infobulle au survol du lien.

Ma question est donc la suivante comment faire ou adapter le css à la structure xhtml écrite :

<div id="corps_col3">
    <a class="ebtci1" href="http://www.btci.net/fiche-presentation.php" target="_blank" title="votre nouvelle banque en ligne"></a>
    <!--<span class="vert_separateur"></span>-->
 
    <!-- Insertion d'un bloc div contenant le sous menu rejoignez-nous -->
    <div id="sous_menugauche">
      <h3>Nous rejoindre </h3>
       <span class="space_col_min"></span>

      <span class="autre"><img src="images/icon_search_agence.jpg" border="0" />Trouvez une agence</span>
     <!-- 
        <li class=""> <a href="#"> <img src="images/icon_search_agence.jpg" border="0" />Trouvez une agence-->
        
        <ul class="survole">
        <li ><a   href="http://www.btci.tg/btci/index.php?page=newsletter&pg=0&me=21&so=1&sg=1"
        title="Inscrivez-vous &agrave; notre bulletin d'informations"
        ><img src="images/icon_newsletter.jpg" border="0" />Newsletter  <span>Inscrivez-vous &agrave; notre bulletin d'informations</span></a>        </li>
        <li ><a    href="http://www.btci.tg/btci/index.php?page=nouscontacter&amp;pg=0&amp;me=21&amp;so=1&amp;sg=1&amp;url=<?php echo base64_encode($url_send); ?>"  title="Contactez-nous pour en savoir plus, n'hesitez pas &agrave; nous laisser votre message"><img src="images/icon_contact.jpg" border="0" />Contactez-nous <span>Pour en savoir plus, n'hesitez pas &agrave; nous laisser votre message</span> </a></li>
      </ul>
    </div>
    <div id="menugauche_decouvertebtci">
    	<h3>Qui sommes nous ?</h3>
        
         <a   href="http://www.btci.tg" target="_blank" title="Découvrez la BTCI">         
         	<img src="images/img_lienbtci.jpg" alt="D&eacute;couvrer la BTCI" width="155" height="102"  border="0"/>
         </a>
        
     </div>
</div>
[code=css]#corps_col3 {
	float: right;
	position:relative;
	margin: 0;
	padding: 0;
	width:156px;
	height:auto;
	text-align:left;
	vertical-align:top;
}

#sous_menugauche, #menugauche_decouvertebtci
{
	/*border: 1px solid  #03ad3f;*/
	padding: 0px;
	width:155px;
	margin: 0 0 5px 0;
	position:relative;
	overflow:hidden;
}

#sous_menugauche h3 , #menugauche_decouvertebtci  h3 
{
	color:#000000;
	height:18px;
	width:155px;
	margin: 0;
	background:url(images/bg_titre.jpg) 0 0 no-repeat;
	font-family: Arial, "Trebuchet MS", sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding:5px 0 0 5px;
	/*font: bold 11px Arial,"Trebuchet MS",sans-serif ;*/
}

#sous_menugauche li a:hover
{
	text-decoration:none;	
	color:#99CC99;	
	
}



ul.survole a:hover span
{  display: none;
}

#sous_menugauche a.survol  
{
	display:none;;	
}

#sous_menugauche a.survol span 
{
	display:none;
}

#sous_menugauche a.survol: hover span  
{