我在使用flot条形图时遇到了一些问题,我想在其上应用引导工具提示。
我构建了一个最小的工作示例 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;
}
});
答案 0 :(得分:0)
如果将鼠标悬停在某个条形图上,然后将鼠标悬停在网格上,然后返回到示例中的其他条形图上,则工具提示中的值会发生变化。这是因为当您没有将鼠标悬停在某个项目(网格)上时,工具提示会被破坏,并且当您将鼠标悬停在项目上时会创建一个新的工具提示。
要在项目之间悬停时更改工具提示值(不破坏工具提示),您必须在显示之前更新工具提示文本。你可以这样做:
$("#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演示了修复。