Tooltip BUG + solve

[dnschnur]

Original author: zniki...@gmail.com (September 27, 2011 14:22:34)

Hello.
I have problem, when 2 graphs very closely and you focus on point with same dataIndex the tooltip not change!
This is my solution to fix it!

function addToolTips() {
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.dataIndex+item.series.label) {
previousPoint = item.dataIndex+item.series.label;
$("#tooltip").remove();
var x = makeDateForToolTip(item.datapoint[0].toFixed(2)),
y = Math.floor( item.datapoint[1].toFixed(2) ),
str = "<b>" + item.series.label + "</b> [" + y + "]<br>" + x;
showTooltip(item.pageX, item.pageY,str);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
}

Original issue: http://code.google.com/p/flot/issues/detail?id=607

[dnschnur]

From leroux.c...@gmail.com on March 03, 2012 23:47:07
I had posted a message about this on the flot discussion groups a couple months ago.
http://groups.google.com/group/flot-graphs/browse_thread/thread/80c07622842c4326

I have provided a working demo of the minor bug and the differences
between the two methods here:
http://frossen.servegame.org/flot/

The contents of that post are pasted below.
I am submitting a pull request containing this fix.

In the example at http://people.iola.dk/olau/flot/examples/interacting.html,
you can see a minor bug in the tooltip when you mouse over the two
points at 7.00,0.66 and 7.00,0.75. If you move your mouse back and
forth over the two points, the tooltip does not change. This is
because the two points have the same index but are in different
arrays.

Also, this method causes the tooltip to flash as it is added and
removed from the DOM each time the user hovers over a point.

As you will see in the code below, my suggestion is to create a
persistent tooltip div and simply hide/show it as necessary.

The main benefit is that this resolves the issue of the tooltip not
updating when moving the cursor between points that have the same
index. It also eliminates the flicker associated with removing and
adding the tooltip div from the DOM. This is most apparent when there
are many points closely grouped. There are additional minor benefits
as well in my opinion. I think this method provides a miniscule
improvement to performance by eliminating the small amount of overhead
associated with adding and removing the element from the DOM and
applying CSS styles every time. The code is also shorter and cleaner
in my opinion. In my use of this method, I have found no negative
effects or deficiencies compared to the example method.

$(document).ready(function() {
$('

').css( {
position: 'absolute',
display: 'none',
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body");

$("#placeholder").bind("plothover", function (event, pos, item) {
    if (item) {
        var x = item.datapoint[0].toFixed(2),
             y = item.datapoint[1].toFixed(2);
        $("#tooltip").html(x + ', ' + y)
           .css({top: item.pageY, left: item.pageX})
           .fadeIn(200);
    } else {
        $("#tooltip").hide();
    }
});

});

[dnschnur]

From mbachw...@gmail.com on March 12, 2012 13:37:37
I'm doing something similar, but the tooltip still flashes a lot for me.. i.e. when i start getting close to a data point, and move mouse towards its center, the tooltip can show/hide several times (though the item is highlighted as active all that time without flashing).. some basic JS debugging shows that at times item is "null" even when hovering literally over the center of the data point :/

Any ideas how to solve?

[cleroux]

I resubmitted an updated pull request containing the fix for this bug since the repository changed so much since it was originally submitted.
#1074