Making a JQuery tooltip retrieve a new value every time the mouse moves.

Question

As i am developing an application that makes use of a tooltip that will display a different value when the user moves the mouse.

The user mouses over a table cell and the application then generates a number, the further right the cursor moves in the cell, the higher the value increases.

I have created a tooltip that runs and when the cursor mouses over the cell, it does indeed show the correct value. But, when the i move the mouse, it does not show the new value but just the older one. I need to know how to make it update everytime the mouse moves or the value of a variable changes, Any ideas for the problem?

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

Below is the document.ready function that calls my function:

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

Below is the function:

<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);

Inside the function is the code to generate the tooltip:

$('#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 know that a new value is being assigned to the cells title attribute because it will display inside the standard small tooltip that a browser will display. The JQuery tooltip will not grab the new value and display it, only the variables initial value when it was called.

Answer 1

Your code is not very clear to me, so this is jus a longshot. First try unnesting your code to make it easier to parse in case there is a reference problem:

$(document).ready(function() {

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

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

    );

});

As far as I can tell, you want to set the element's title attribute to the position and then read and display its value using the qtip() function. This is unnecessary: if you make calculate_Time() return a value instead,

function calculate_Time (event) {

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

}

you can save it to a variable var myOrig = calculate_Time() and then pass that to your tooltip function qtip(myOrig), or pass a call to the the function itself as a parameter qtip( calculate_Time() ) ;. This might be easier to maintain and debug.

Hth

Answer 2

If jQuery doesn't do what you want, skip jQuery and work it out in raw JavaScript, here is what I did for a tooltip:

<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>

Pair it with onmosuemove and onmouseout like so:

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