不能调整的flot图上的bootstrap工具提示

时间:2015-07-07 12:15:00

标签: jquery twitter-bootstrap flot

我在使用flot条形图时遇到了一些问题,我想在其上应用引导工具提示。

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

问题出在悬停时工具提示的非调整值

我的方法如下:

  • 在悬停项目时,将移至项目的位置
  • 使用bootstrap tooltip methods
  • 在该框上创建工具提示
  • 在离开时摧毁工具提示

我想我必须做一些非常错误的事情,但我似乎无法指出究竟是什么。有人可以帮忙吗?

代码示例

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

1 个答案:

答案 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演示了修复。

https://jsfiddle.net/so1sym82/5/