Question

I have written a graphing widget with Raphael JS. Data is taken from a database and graphed in a canvas. The issue appeared when I tried to create a tooltip for the data points. The tooltip fades in, but is buggy when fading out. Sometimes it will fade out and sometimes it won’t (it seems to not fade out when the mouse is moving fast). It should be noted that when the mouse hovers over a datapoint the data point grows. Any help in improving my code would be helpful. Thanks. Code below:

circle2[<?php echo $i?>].hover(function () {
circle2[<?php echo $i?>].attr({"stroke": "#000"});
circle2[<?php echo $i?>].attr({"r": "8"});
rect.toFront();
text.toFront();
rect.attr({"x":30+50*<?php echo $i ?>,"y":220-250*<?php echo $time_value[$i]/100000;?>});
text.attr({"text":"<?php echo $date[$i]?>\nValue: $<?php echo $time_value[$i]?>\nInvested: $<?php echo $time_value[$i]?>","y":250-250*<?php echo $time_value[$i]/100000;?>,"x":33+50*<?php echo $i ?>});
rect.animate({"opacity":0.8},500);
text.animate({"opacity":1.0},500);
},
    function () {
         rect.attr({"opacity":0});
         text.attr({"opacity":0});
         circle2[<?php echo $i?>].attr({"stroke": "none"});
         circle2[<?php echo $i?>].attr({"r": "5"});
    }
);

Answer 1

Here’s the problem (95% certainty): if there’s a rapid hover occurring, and the duration of the hover is less than the duration of your hover-start animation (500 ms in this case), your hover-out function will set the element opacity to 0 BEFORE the animation concludes and sets the opacity back to 0.8 and 1.0 for your background and text, respectively.

The solution is to stop the ongoing animations at the conclusion of the hover cycle. You should be able to update your hover-out handler as follows:

... 
function () {
    rect.stop().attr({"opacity":0});
    text.stop().attr({"opacity":0});
    circle2[<?php echo $i?>].attr({"stroke": "none"});
    circle2[<?php echo $i?>].attr({"r": "5"});
}