bootstrap tooltip on a flot graph not adjusting

Question

I've got some problems with a flot bar chart on which I want to apply a bootstrap tooltip.

I've constructed a minimal working example https://jsfiddle.net/so1sym82/4/

The problem lies in non adjusting values of the tooltip when hovering down.

My approach is the following:

• on hovering an item, shift the box to the position of the item
• create the tooltip on that box using bootstrap tooltip methods
• upon moving away destroying the tooltip

I guess I must be doing something terribly wrong, but I can't seem to point out what exactly. Could someone help?

Code example

$("#chart").bind("plothover", function (event, pos, item) {
   if (item) {
        var x = item.datapoint[0].toFixed(2),
            y = item.datapoint[1].toFixed(2),
            value = (y - item.datapoint[2]).toFixed(2),
            day = days[x - 1],
            hour = item.seriesIndex + 1;

        if (gx != x || gy != y || flag) { //to prevent animation when moving inside an item
            $("#box").css({top: item.pageY + 2, left: item.pageX })
                     .tooltip({
                       title: day + " " + hour + "e hour<br/>" + value + "%",
                       placement: 'top',
                       html: true
                     })
                     .tooltip('show');

            gx = x;
            gy = y;
            flag = false;
        }
    } else {
        $("#box").tooltip('destroy');
        flag = true;
    }
});

Answer 1

If you hover over a bar, then hover over the grid, then back on a different bar in your example, the values in the tooltip change. This is because the tooltip gets destroyed when you aren't hovering over an item (the grid) and you create a new tooltip when you hover back over an item.

To change the tooltip value when you hover from item to item (without destroying the tooltip), you've got to update the tooltip text before you show it. You can do that this way:

$("#box").css({
    top: item.pageY + 2,
    left: item.pageX
})
.tooltip({
    title: day + " " + hour + "e hour<br/>" + value + "%",
    placement: 'top',
    html: true
})
.attr('data-original-title', day + " " + hour + "e hour<br/>" + value + "%")
.tooltip('fixTitle')
.tooltip('show');

The code above will create the tooltip (in case it doesn't already exist). It will also change the tooltip title by setting the data-original-title of the tooltip, then calling the tooltip's fixTitle method. The JSFiddle below demonstrates the fix.

https://jsfiddle.net/so1sym82/5/