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

【问题标题】：Chart.js (line chart) tooltip duration/delayChart.js（折线图）工具提示持续时间/延迟
【发布时间】：2015-07-28 22:44:28
【问题描述】：

似乎没有任何选项或实现可以在工具提示从悬停状态变为非悬停状态时消失之前显示一两秒钟。因此，当您将鼠标悬停在工具提示上时，很好，它会显示，但是当您将鼠标从该点移开时，我希望它再显示 2 秒钟，而不是像现在这样立即消失。

到目前为止我做了什么

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

有人可以指出我在工具提示上实现这种延迟/淡入淡出效果需要做什么。

【问题讨论】：

标签： javascript css chart.js

【解决方案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/

【讨论】：