bootstrap 浮动图表上的工具提示未调整

Question

我想在浮动条形图上应用 bootstrap 工具提示时遇到一些问题。

我构建了一个最小的工作示例 https://jsfiddle.net/so1sym82/4/

问题出在悬停时未调整工具提示的值。

我的方法如下：

悬停项目时，将框移动到项目
使用 bootstrap 工具提示方法在该框上创建工具提示
离开时破坏工具提示

我想我一定是做错了什么，但我似乎无法指出到底是什么。有人可以帮忙吗？

代码示例

$("#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

如果您将鼠标悬停在一个条上，然后将鼠标悬停在网格上，然后返回示例中的另一个条，工具提示中的值会发生变化。这是因为当您没有将鼠标悬停在某个项目（网格）上时工具提示会被销毁，而当您将鼠标悬停在某个项目上时会创建一个新的工具提示。

要在将鼠标悬停在项目之间时更改工具提示值（不破坏工具提示），您必须在显示之前更新工具提示文本。你可以这样做：

$("#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');

上面的代码将创建工具提示（以防它尚不存在）。它还将通过设置工具提示的 data-original-title，然后调用工具提示的 fixTitle 方法来更改工具提示标题。下面的 JSFiddle 演示了修复。

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

bootstrap 浮动图表上的工具提示未调整

bootstrap tooltip on a flot graph not adjusting

jquery

flot

twitter-bootstrap