Problème de bulle d'encre avec jQuery

Question

J'ai une table dans laquelle certaines cellules adjacentes ont la même classe (someClass). Je voudrais afficher une info-bulle lorsque la souris survole l'une de ces cellules. Voici comment je mis en œuvre cette:

/* HTML code */ 

<div id="tooltip"><div> 

/* CSS code */ 

#tooltip { 
    display: none; 
    position: absolute; 
    border: 1px solid #333; 
    background: #f7f5d1; 
    padding: 2px 5px; 
    color: #333; 
    font-size: 20px; 
} 

/* jQuery code */ 

$(".someClass").hover(function(e) { 
         $("#tooltip").html("Shalom") 
             .css("top", (e.pageY - 10) + "px") 
             .css("left", (e.pageX + 20) + "px") 
             .fadeIn("fast");  
         }, 
         function() { 
         $("#tooltip").html("").hide(); 
         }); 

$(".someClass").mousemove(function(e) { 
          $("#tooltip").css("top", (e.pageY - 10) + "px") 
              .css("left", (e.pageX + 20) + "px"); 
          }); 

Le problème est lorsque la souris quitte une cellule et pénètre dans une cellule adjacente, l'info-bulle disparaît et réapparaît, qui n'a pas l'air bien.

Comment éviter que l'infobulle disparaisse et réapparaisse?

Merci!

Answer 1

code non testé snipped, nécessite une infobulle être identifié par #tooltip_id

var some_object = { 
    about_to_be_closed: false, 
    close_unless_needed: function() { 
     if (some_object.about_to_be_closed) { 
      $(some_object.about_to_be_closed).fadeOut(); 
     } 
    } 
}; 


// code to be executed on close 
some_object.about_to_be_closed = tooltip_id; 
window.setTimeout(close_unless_needed, 100) 


// code to be executed on open 
if (some_object.about_to_be_closed == tooltip_id) { 
    some_object.about_to_be_closed = false; 
} 

Ce n'est pas vraiment une solution fiable mais je cela pourrait fonctionner.