1.    var xOffset=6
 2.    var yOffset=5
 3.    
 4.    var affiche = false; // La variable i nous dit si le bloc est visible ou non
 5.    var w3c=document.getElementById && !document.all;
 6.    var ie=document.all;
 7.    
 8.    if (ie||w3c) {
 9.    var laBulle
10.    }
11.   
12.    function ietruebody(){ // retourne le bon corps...
13.    return (document.compatMode && document.compatMode!="BackCompat" )? document.documentElement : document.body
14.    }
15.   
16.    function deplacer(e) {
17.       if(affiche){
18.          var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
19.          var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;
20.   
21.          var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
22.          var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
23.   
24.          var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
25.          var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;
26.   
27.          var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000
28.   
29.           
30.    // modifier la largeur de l'objet s'il est trop grand...
31.            if(laBulle.offsetWidth > winwidth / 3){
32.                laBulle.style.width = winwidth / 3
33.            }
34.   
35.    // si la largeur horizontale n'est pas assez grande pour l'info bulle
36.            if(rightedge < laBulle.offsetWidth){
37.    // bouge la position horizontale de sa largeur à gauche
38.            laBulle.style.left = curX - laBulle.offsetWidth + "px"
39.            }
40.              else {
41.                if(curX < leftedge){
42.                laBulle.style.left = "5px"
43.             }
44.                else{
45.    // la position horizontale de la souris
46.                  laBulle.style.left = curX + xOffset + "px"
47.                }
48.             }
49.   
50.    // même chose avec la verticale
51.           if(bottomedge < laBulle.offsetHeight){
52.             laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
53.           }
54.             else {
55.              laBulle.style.top = curY + yOffset + "px"
56.             }
57.          }
58.      }
59.   
60.    function showTooltip(text) {
61.         if (w3c||ie){
62.           laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle" ) : ""
63.           laBulle.innerHTML = text; // fixe le texte dans l'infobulle
64.           laBulle.style.visibility = "visible"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
65.           affiche = true;
66.         }
67.    }
68.    function hideTooltip() {
69.        if (w3c||ie){
70.           affiche = false
71.           laBulle.style.visibility="hidden" // avoid the IE6 cache optimisation with hidden blocks
72.           laBulle.style.top = '-100000px'
73.           laBulle.style.backgroundColor = ''
74.           laBulle.style.width = ''
75.        }
76.    }
77.   
78.    document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.

1. <a href="#" onmouseover="showTooltip('<div class=\'info\'><strong>Titre image</strong><br /><img id=\'big\' src=\'images/test.jpg\' width=\'700\'></div>');"
2.   onmouseout="hideTooltip()"><img class="imgleft" id="big" src="images/test.jpg" width=100 height=60 onmouseout="hideTooltip()" /></a>
3. 
4. <div id="bulle"></div>   // permet d'afficher l'infobulle

1. img {
2.   border:none;
3. }
4.     #bulle { 
5.        position: absolute; visibility: hidden;  font-size:12px;
6.      }
7. .info { 
8.   border:1px solid #666666; padding: 7px; color:#666666; background-color:#FFFFFF; font-family:"trebuchet MS";
9. }