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.
