Création d'une info-bulle JQuery récupération d'une nouvelle valeur à chaque fois que la souris se déplace

Question

Comme je développe une application qui utilise une info-bulle qui affichera une valeur différente lorsque l'utilisateur déplace la souris.

L'utilisateur passe sur une cellule de tableau et l'application génère ensuite un nombre, plus le curseur se déplace dans la cellule, plus la valeur augmente.

J'ai créé une infobulle qui s'exécute et lorsque le curseur survole la cellule, elle affiche en effet la valeur correcte. Mais, quand je bouge la souris, elle n'affiche pas la nouvelle valeur mais seulement la plus ancienne. J'ai besoin de savoir comment le mettre à jour chaque fois que la souris se déplace ou que la valeur d'une variable change, des idées pour le problème?

<table> 
     <tr id="mon_Section"> 
      <td id="day_Title">Monday</td> 
      <td id="mon_Row"></td> 
     </tr> 
</table> 

est inférieure à la fonction document.ready qui appelle ma fonction:

$(document).ready(function() 
{ 
    $("#mon_Row").mousemove(calculate_Time); 
}); 

est la fonction suivante:

<script type="text/javascript"> 
var mon_Pos = 0; 
var hour = 0; 
var minute = 0; 
var orig = 0; 
var myxpos = 0; 

function calculate_Time (event) 
{ 
myxpos = event.pageX; 
myxpos = myxpos-194; 

if(myxpos<60) 
{ 
    orig = myxpos; 
    $('#mon_Row').attr("title", orig); 
} 
if (myxpos>=60 && myxpos<120) 
{ 
    orig=myxpos; 
    $('#mon_Row').attr("title", orig); 
} 
if (myxpos>=120 && myxpos<180) 
{ 
    orig=myxpos; 
    $('#mon_Row').attr("title", orig); 

Dans la fonction est le code pour générer l'info-bulle:

$('#mon_Row').each(function() 
{ 
    $(this).qtip(
    { 
     content: 
{ 
    text: false 
}, 
position: 'topRight', 
    hide: 
{ 
    fixed: true // Make it fixed so it can be hovered over 
    }, 
style: 
{ 
    padding: '5px 15px', // Give it some extra padding 
     name: 'dark' // And style it with the preset dark theme 
} 
    }); 
}); 

I Sachez qu'une nouvelle valeur est affectée à l'attribut de titre des cellules car elle s'affichera dans la petite info-bulle standard qu'un navigateur affichera. L'info-bulle JQuery n'attrape pas la nouvelle valeur et l'affiche, seule la valeur initiale des variables lors de son appel.

Answer 1

Votre code n'est pas très clair pour moi, donc ceci est jus a longshot. Essayez d'abord désimbrication votre code pour le rendre plus facile à analyser dans le cas où il y a un problème de référence:

$(document).ready(function() { 

    $("#mon_Row").mousemove(function() { 

     calculate_Time() ; 
     $(this).qtip(
      // 
     ) ; 

    ); 

}); 

Pour autant que je peux dire, vous voulez définir l'attribut title de l'élément à la position, puis lire et afficher son valeur à l'aide de la fonction qtip(). Cela est inutile: si vous faites calculate_Time() retour une valeur au lieu,

function calculate_Time (event) { 

    var orig ; 
    //conditions setting orig to myxpos 
    return orig ; 

} 

vous pouvez enregistrer une var myOrig = calculate_Time() variable et passer alors que votre fonction infobulle qtip(myOrig), ou passer un appel à la fonction elle-même en tant que paramètre qtip(calculate_Time()) ;. Cela pourrait être plus facile à maintenir et déboguer.

Hth

Answer 2

Si jQuery ne fait pas ce que vous voulez, passez jQuery et travaillez en JavaScript brut, voici ce que je faisais une info-bulle:

<script type="text/javascript"> 
function hover(intext,e){ 
    if(!intext){return} 
    document.getElementById("hoverdiv").innerHTML=intext 
    document.getElementById("hoverdiv").style.display="" 
    var x=0 
    var y=0 
    if(e.pageY>-1){ 
     x=e.pageX 
     y=e.pageY 
    } 
    else{ 
     x=e.clientX 
     y=e.clientY 
     if(document.documentElement.scrollTop>-1){ 
      x+=document.documentElement.scrollLeft 
      y+=document.documentElement.scrollTop 
     } 
     else if(document.body.scrollTop>-1){ 
      x+=document.body.scrollLeft 
      y+=document.body.scrollTop 
     } 
    } 
    document.getElementById("hoverdiv").style.left=(x+24)+"px" 
    document.getElementById("hoverdiv").style.top=(y-24)+"px" 
} 
function hoverout(){ 
    document.getElementById("hoverdiv").style.display="none" 
} 
</script> 
<div id="hoverdiv" style="display:none;position:absolute;background-color:#eef;border:1px solid black;padding:3px 6px;width:180px;"></div> 

avec paire onmosuemove et onmouseout comme suit:

<a onmouseout='hoverout()' onmousemove='hover("Tooltip",event)' href='#'>Hover</a>