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

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

但这似乎是一个丑陋的 hack？

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

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

In which way can I prevent constant redrawing of a tooltip

jquery

twitter-bootstrap

flot