Question

在从悬停状态转为非悬停状态之前消失时，似乎没有任何选项或实现显示工具提示一两秒。因此，当你的鼠标悬停在工具提示上时，很棒，它显示但是当你从点移开鼠标时我希望显示额外的2秒而不是像当前那样立即消失。

到目前为止我做了什么

我查看了文档和可用的工具提示选项。它有一个customTooltip函数可用，但是当你想要实现一个完全自定义的工具提示时。
浏览chart.js折线图的代码库，它附加了事件，似乎无法弄清楚如何添加延迟。
看到'mouseout'，'mouseover'事件数组字符串列表，但似乎无法弄清楚如何使用它们。

有人可以指出我在正确的方向上指出我在工具提示上实现这种延迟/淡化效果需要做些什么。

Answer 1

showTooltip函数清除工具提示（重绘会清除现有的工具提示）。因此，一种天真的方式是引入你的延迟，如此

var data = {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [
        {
            data: [12, 23, 23, 43, 45, 12, 33]
        }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data);

var originalShowTooltip = myLineChart.showTooltip;
var timeout;
myLineChart.showTooltip = function (activeElements) {
    var delay = (activeElements.length === 0) ? 2000 : 0;
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        originalShowTooltip.call(myLineChart, activeElements);
    }, delay);
}

如果图表要清除所有工具提示，这会延迟工具提示。

请注意，如果您转到另一个工具提示，则删除旧的工具提示没有延迟。如果你想让它成为延迟消失，你需要保持自己的活动点数组推入元素（瞬间）/弹出元素（延迟）

小提琴 - http://jsfiddle.net/zubynd0c/

Chart.js（折线图）工具提示持续时间/延迟

1 个答案: