jquery - 我可以通过什么方式防止不断重绘工具提示

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