浮點圖上的引導工具提示未調整

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/