如何使用Tippy.js在鼠标输入和单击时显示工具提示 [英] How to show tooltip on mouseenter and hide on click with Tippy.js

问题描述

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

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

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

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

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

我想要两者兼而有之。在鼠标输入上显示工具提示，但在我离开之前保持打开状态。

我宁愿**不监听单击事件和鼠标输入事件，在使用{ trigger: 'manual' }时手动显示和隐藏{ trigger: 'manual' }

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

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

我是否可以使用{custom}触发器进行查找？如何？

非常感谢！

推荐答案

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

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

这篇关于如何使用Tippy.js在鼠标输入和单击时显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！