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

Question

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

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

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

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

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

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

我更喜欢**不听click事件和mouseenter事件并在使用时手动显示和隐藏它{ trigger: 'manual' }

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

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

我可以使用{custom}触发器来寻找我想要的东西吗？如何？

非常感谢！

Answer 1

根据版本，您可以更新triggerusing 生命周期挂钩：

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