如何使用Tippy.js在鼠标输入和单击时显示工具提示-前端问题

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

本文介绍了如何使用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在鼠标输入和单击时显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！