Infobulle dynamique

Bonjour à tous,

Depuis quelques jours je cherche une solution à mon problème mais je ne trouve rien de bien intéressant...

Je recherche un script simple pour que mon infobulle se déplace quand on déplace le curseur...

je vous montre mon script actuel :

Entre head :

<style type="text/css"> 
* { 
   font-size: 11px; /* on définit les propriétés de texte pour toutes les balises */ 
   font-family: Tahoma, Verdana, Arial, serif; 
} 
a.info { 
   position: relative; 
   color: black; 
   text-decoration: none; 
   border-bottom: 1px gray dotted; /* on souligne le texte */ 
} 
a.info span { 
   display: none; /* on masque l'infobulle */ 
} 
a.info:hover { 
   background: none; /* correction d'un bug IE */ 
   z-index: 500; /* on définit une valeur pour l'ordre d'affichage */ 

   cursor: help; /* on change le curseur par défaut en curseur d'aide */ 
} 
a.info:hover span { 
   display: inline; /* on affiche l'infobulle */ 
   position: absolute; 

   white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */ 

   top: -100px; /* on positionne notre infobulle */ 
   right: 500px; 

   background: white; 

   color: green; 
   padding: 3px; 

   border: 1px solid green; 
   border-left: 4px solid green; 
} 

</style>  

Avant mon image où l'infobulle apparaît :

<a href="#" class="info">

Après l'image :

<span>Formule 8 minis viénoiseries <br> 
    - 2 minis pains au chocolat <br /> - 2 minis croissants<br>- 1 mini brioche<br>- 1 mini pain au raisin<br>- 1 mini chausson<br>- 1 mini torsade</span></a>

Merci d'avance pour vos réponses !

A très bientôt