How can I prevent tooltip from constantly redrawing
I have a specific Flot plot and added bootstrap tooltips.
When you hover and move the mouse over an element, the tooltip disappears permanently. See the following jsfiddle http://jsfiddle.net/dietervdf/fuwg9fn9/1/
I am using the following code:
$('#placeholder').bind('plothover', function (event, pos, item) {
if (item) {
var x = item.datapoint[0],
y = item.datapoint[1];
$('#box')
.css({
top: item.pageY - 2,
left: item.pageX + 1
})
.tooltip({
title: y,
placement: 'top',
html: true
})
.tooltip('show');
} else {
$('#box').tooltip('destroy');
}
});
What is the best way to prevent this behavior? I was thinking of using a global variable and remember the last (x,y)
-item. Something like:
if(global_x != x || global_y != y)
then show and adjust global_x, global_y
But does this seem like an ugly hack?
source to share
Because you show the balloon tip every time the event plothover
is fired, the balloon tip re-appears every time you move the mouse (even at the same point). This is causing the flicker you see.
If you initialize your tooltip outside of an event plothover
, and then check if the tooltip is visible (by checking for $('.tooltip').length === 0
), you can decide whether to show or just update the tooltip text. This gets rid of the flickering you notice:
if ($('.tooltip').length === 0) {
$('#box').tooltip({
title: "tooltip title"
}).tooltip('show');
} else {
$('#box').tooltip({
title: "tooltip title"
}).tooltip('fixTitle');
}
This JSFiddle demonstrates the fix.
source to share