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.