Chart.js 3.x如何仅为tooltip提示框设置独立的过渡动画延迟？

你遇到的问题是配置项位置写错导致的，不需要自定义插件，用内置tooltip插件就可以实现需求。

正确配置方式 #

你之前把触发延迟的delay属性写在了animation配置项下，这个属性的作用是控制tooltip动画每帧的延迟，而非触发tooltip的等待延迟，才会出现动画总时长变长的问题。正确的配置如下：

options: {
  plugins: {
    tooltip: {
      // 悬停后触发tooltip的等待延迟，单位ms
      delay: 2000,
      animation: {
        // tooltip显示时的动画时长，单位ms
        duration: 200
      }
    }
  }
}

配置说明 #

• 直接写在tooltip配置下的delay是内置专门用来控制悬停后多久才触发tooltip显示的属性，和动画配置完全独立
• animation.duration单独控制tooltip出现时的淡入、位移等动画的时长，不会和触发延迟混淆

调整配置后即可实现你要的效果：悬停数据点2秒后才触发tooltip显示，显示过程的动画时长为200ms，在不同数据点间移动时动画时长也会保持200ms不变。

内容的提问来源于stack exchange，提问作者sieken