JQuery tooltip creation restores new value every time mouse is moved
How am I developing an application that uses a tooltip that will display a different value when the user moves the mouse.
The user mouse over a table cell, and the application then generates a number, and the further to the right the cursor moves in the cell, the higher the value increases.
I have created a tooltip that fires up and when the mouse cursor is over the cell it actually shows the correct value. But when I move the mouse, it doesn't show the new value, only the old one. I need to know how to update it every time 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 for creating 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 title attribute of the cells because it will be displayed inside the standard little tooltip displayed by the browser. JQuery tooltip will not grab the new value and display it, only the initial value of the variables when it is called.
a source to share
Your code is not very clear to me, so this is jus longshot. Try disabling your code first to make it easier to parse if there is a link issue:
$(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 position and then read and display its value using a function qtip()
. This is optional: if instead of calculate_Time()
returning a value,
function calculate_Time (event) {
var orig ;
//conditions setting orig to myxpos
return orig ;
}
you can store it in a variable var myOrig = calculate_Time()
and then pass that to your tooltip function qtip(myOrig)
or pass the call to the function itself as a parameter qtip( calculate_Time() ) ;
. It might be easier to maintain and debug.
Hth
a source to share
If jQuery doesn't do what you want, then skip jQuery and process it in raw JavaScript, here's what I did for the 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>
Connect it with onmosuemove and onmouseout like this:
<a onmouseout='hoverout()' onmousemove='hover("Tooltip",event)' href='#'>Hover</a>
a source to share