Question

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

当您在.tippy的元素上点击时，会触发工具提示，并在您点击之前一直保持打开状态。

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

当您在.tippy的元素上 mouseenter 时显示工具提示，并在鼠标离开.tippy元素时隐藏。

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

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

我更喜欢**不听取点击事件和鼠标中心事件，并在使用{ trigger: 'manual' }

时手动显示并隐藏它

此外，您能否解释一下{custom}触发器选项。来自文档：

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

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

非常感谢！

Answer 1

从v3开始，您可以使用set()方法。

tippy('.tippy', {
  trigger: 'mouseenter',
  onShow(tip) {
    tip.set({ trigger: 'click' })
  },
  onHide(tip) {
    tip.set({ trigger: 'mouseenter' })
  }
})

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

1 个答案: