Question

我有一个Flot图和附加的bootstrap工具提示到数据点。

将鼠标悬停在某个项目上方时，工具提示会不断淡入。请参阅以下jsfiddle http://jsfiddle.net/dietervdf/fuwg9fn9/1/

我使用以下代码：

$('#placeholder').bind('plothover', function (event, pos, item) {
    if (item) {
        var x = item.datapoint[0],
            y = item.datapoint[1];

        $('#box')
            .css({
            top: item.pageY - 2,
            left: item.pageX + 1
        })
            .tooltip({
            title: y,
            placement: 'top',
            html: true
        })
            .tooltip('show');
    } else {
        $('#box').tooltip('destroy');
    }
});

防止此行为的最佳方法是什么？我正在考虑使用类似全局变量并记住最后(x,y) - 位置。类似的东西：

if(global_x != x || global_y != y)
    then show and adjust global_x, global_y

但这看起来像是一个丑陋的黑客？

Answer 1

由于每次触发plothover事件时都会显示工具提示，因此每次鼠标移动时（甚至在同一点上）都会重新显示工具提示。这会导致你看到的闪烁。

如果您在plothover事件之外初始化工具提示，然后检查工具提示是否可见（通过检查$('.tooltip').length === 0），您可以决定是否需要实际显示或仅更新工具提示文字。这消除了你注意到的闪烁：

if ($('.tooltip').length === 0) {
    $('#box').tooltip({
       title: "tooltip title"
    }).tooltip('show');
} else {
    $('#box').tooltip({
        title: "tooltip title"
    }).tooltip('fixTitle');
}

This JSFiddle演示了此修复程序。

我可以通过哪种方式防止不断重绘工具提示

1 个答案: