[英]bootstrap tooltip on a flot graph not adjusting
I've got some problems with a flot bar chart on which I want to apply a bootstrap tooltip. 浮动条形图存在一些问题,我想在该条形图上应用引导工具提示。
I've constructed a minimal working example https://jsfiddle.net/so1sym82/4/ 我构建了一个最小的工作示例https://jsfiddle.net/so1sym82/4/
The problem lies in non adjusting values of the tooltip when hovering down. 问题在于悬停时无法调整工具提示的值 。
My approach is the following: 我的方法如下:
I guess I must be doing something terribly wrong, but I can't seem to point out what exactly. 我想我肯定做错了什么,但是我似乎无法指出确切的内容。 Could someone help? 有人可以帮忙吗?
Code example 代码示例
$("#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;
}
});
If you hover over a bar, then hover over the grid, then back on a different bar in your example, the values in the tooltip change. 如果将鼠标悬停在一个栏上,然后将鼠标悬停在网格上,然后再回到示例中的另一个栏上,则工具提示中的值将发生变化。 This is because the tooltip gets destroyed when you aren't hovering over an item (the grid) and you create a new tooltip when you hover back over an item. 这是因为当您将鼠标悬停在一个项目(网格)上时,工具提示会被破坏,而当您将鼠标悬停在一个项目上时,会创建一个新的工具提示。
To change the tooltip value when you hover from item to item (without destroying the tooltip), you've got to update the tooltip text before you show it. 要在从一个项目移到另一个项目时更改工具提示值(不破坏工具提示),必须在显示工具提示文本之前对其进行更新。 You can do that this way: 您可以这样进行:
$("#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');
The code above will create the tooltip (in case it doesn't already exist). 上面的代码将创建工具提示(如果尚不存在)。 It will also change the tooltip title by setting the data-original-title
of the tooltip, then calling the tooltip's fixTitle
method. 它还将通过设置工具提示的data-original-title
,然后调用工具提示的fixTitle
方法来更改工具提示标题。 The JSFiddle below demonstrates the fix. 下面的JSFiddle演示了此修复程序。
https://jsfiddle.net/so1sym82/5/ https://jsfiddle.net/so1sym82/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.