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

Question

我正在使用 Tippy.js .我想在 mouseenter 上显示工具提示，但在单击时隐藏它。

当您单击带有 .tippy 的元素时，这会触发工具提示并保持打开状态，直到您单击离开。

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

这会在您使用 .tippy 在元素上鼠标输入 时显示工具提示，并在鼠标离开 .tippy 元素时隐藏。

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

我想要两者的结合。在 mouseenter 上显示工具提示，但在我点击离开之前保持打开状态。

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

此外，请您解释一下{custom}触发选项。来自文档:

{custom} refers to the fact that you can have any event listener, but it won't have the opposite "hide" event.

我可以使用 {custom} 触发器来查找我要查找的内容吗？怎么办？

非常感谢!

Answer 1

根据版本，您可以使用生命周期 Hook 更新触发器:

• v5: setProps() 方法
• v3-v4:set() 方法

两者的工作原理相同。

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'});
  }
});