浮点图上的引导工具提示未调整

Question

浮动条形图存在一些问题，我想在该条形图上应用引导工具提示。

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

问题在于悬停时无法调整工具提示的值 。

我的方法如下：

• 将鼠标悬停在项目上时，将框移到该项目的位置
• 使用引导工具提示方法在该框中创建工具提示
• 离开时摧毁工具提示

我想我肯定做错了什么，但是我似乎无法指出确切的内容。 有人可以帮忙吗？

代码示例

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