Jquery flot图上的引导工具提示未调整

我想在flot条形图上应用引导工具提示，但它有一些问题

我构建了一个最小的工作示例

问题在于向下悬停时工具提示的非调整值

我的做法如下：

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

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

代码示例

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

$（“#图表”）.bind（“plothover”，函数（事件、位置、项目）{
如果（项目）{
var x=项。数据点[0]。固定（2），
y=项。数据点[1]。固定（2），
值=（y-item.datapoint[2]）toFixed（2），
天=天[x-1]，
小时=item.seriesIndex+1；
如果（gx！=x | | gy！=y | |标志）{//在项目内部移动时防止动画
$（“#box”）.css（{top:item.pageY+2，left:item.pageX}）
.工具提示({
标题：日+“”+小时+”e小时
“+值+“%”，
位置：'顶部'，
html：对
})
.工具提示（“显示”）；
gx=x；
gy=y；
flag=false；
}
}否则{
$（“#框”）。工具提示（“销毁”）；
flag=true；
}
});

如果将鼠标悬停在一个条形图上，然后将鼠标悬停在网格上，然后再回到示例中的另一个条形图上，则工具提示中的值会更改。这是因为当您不将鼠标悬停在某个项目（网格）上时，工具提示将被销毁，而当您将鼠标悬停在某个项目上时，将创建一个新的工具提示

要在项目之间悬停时更改工具提示值（而不销毁工具提示），必须在显示工具提示文本之前更新工具提示文本。您可以这样做：

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

$（“#框”）.css({
顶部：item.pageY+2，
左：item.pageX
})
.工具提示({
标题：日+“”+小时+”e小时
“+值+“%”，
位置：'顶部'，
html：对
})
.attr（'data-original-title'，day+“”+hour+“e hour
“+value+“%”）
.工具提示（'fixTitle'）
.工具提示（“显示”）；

上面的代码将创建工具提示（以防它不存在）。它还将通过设置工具提示的

数据原始标题

，然后调用工具提示的

固定标题

方法来更改工具提示标题。下面的JSFiddle演示了修复方法

---

如果将鼠标悬停在一个条上，然后将鼠标悬停在网格上，然后再回到示例中的另一个条上，则工具提示中的值会更改。这是因为当您不将鼠标悬停在某个项目（网格）上时，工具提示将被销毁，而当您将鼠标悬停在某个项目上时，将创建一个新的工具提示

要在项目之间悬停时更改工具提示值（而不销毁工具提示），必须在显示工具提示文本之前更新工具提示文本。您可以这样做：

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

$（“#框”）.css({
顶部：item.pageY+2，
左：item.pageX
})
.工具提示({
标题：日+“”+小时+”e小时
“+值+“%”，
位置：'顶部'，
html：对
})
.attr（'data-original-title'，day+“”+hour+“e hour
“+value+“%”）
.工具提示（'fixTitle'）
.工具提示（“显示”）；

上面的代码将创建工具提示（以防它不存在）。它还将通过设置工具提示的

数据原始标题

，然后调用工具提示的

固定标题

方法来更改工具提示标题。下面的JSFiddle演示了修复方法

---

谢谢，还有一个问题。使用这个fixtTitle方法，我可以用hide替换destroy？首选哪种方法？@dietervdf您可以将

fixtTitle

替换为

hide

，但它并不总是一致显示。我指的是在网格上悬停时的

.tooltip（'destroy'）

。我应该用

.tooltip（'hide'）

来代替它，还是它真的不重要？@dietervdf它真的不重要。您必须在第一次将鼠标悬停在某个对象上时首先创建工具提示。代码的编写方式非常简单。谢谢，还有一个问题。使用这个fixtTitle方法，我可以用hide替换destroy？首选哪种方法？@dietervdf您可以将

fixtTitle

替换为

hide

，但它并不总是一致显示。我指的是在网格上悬停时的

.tooltip（'destroy'）

。我应该用

.tooltip（'hide'）

来代替它，还是它真的不重要？@dietervdf它真的不重要。您必须在第一次将鼠标悬停在某个对象上时首先创建工具提示。代码的编写方式非常简单。