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.
