如何使用 Tippy.js 在 mouseenter 上显示工具提示并在单击时隐藏

我在用Tippy.js https://atomiks.github.io。我想在 mouseenter 上显示工具提示，但在单击时隐藏它。

当您click在一个元素上.tippy并保持打开状态，直到您点击离开。

tippy('.tippy', { trigger: 'click' });

当您鼠标输入在一个元素上.tippy当鼠标离开时隐藏.tippy元素。

tippy('.tippy', { trigger: 'mouseenter' });

我想要两者的结合。在 mouseenter 上显示工具提示，但将其保持打开状态，直到我单击离开。

我更喜欢**不监听单击事件和鼠标输入事件并在使用时手动显示和隐藏它{ trigger: 'manual' }

另外，您能否解释一下{custom}触发选项。从文档中：

{custom}指的是您可以拥有任何事件侦听器，但是 它不会有相反的“隐藏”事件。

我可以用吗{custom}触发我正在寻找的东西？如何？

多谢！

根据版本的不同，您可以更新trigger使用生命周期钩子：

• v5: setProps() method
• v3-v4: set() method

两者的工作原理相同。

tippy('.tippy', {
  trigger: 'mouseenter',
  onShow(instance) {
    // v5
    instance.setProps({trigger: 'click'});
    // v3-v4
    // instance.set({trigger: 'click'});
  },
  onHide(instance) {
    // v5
    instance.setProps({trigger: 'mouseenter'});
    // v3-v4
    // instance.set({trigger: 'mouseenter'});
  }
});