Suggestion: Improved tooltip example

[Ced]

I would like to suggest an improved way of presenting tooltips.

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() {
$('<div id="tooltip"></div>').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();
}
});
});

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

I have also provided the original 'interacting.html' modified with the
new method here:
http://frossen.servegame.org/flot/interacting.html

[Jeremiah Poling]

Thanks for this! Using it on our site.