通过 Tippy js v6 更改工具提示内容

Question

我正在使用剪贴板 js 复制粘贴内容，Tippy js 在按钮上附加了一个工具提示。

但是如何更改工具提示内容并使其在剪贴板成功事件触发时显示两秒钟？我想不出更改内容的方法，因为我使用的不是道具，而是属性方法。

可能的相关文档：

https://atomiks.github.io/tippyjs/v6/constructor/

https://atomiks.github.io/tippyjs/v6/tippy-instance/

https://atomiks.github.io/tippyjs/v6/methods/

var clipboard = new ClipboardJS('.btn');

tippy('.btn', {
    placement: 'bottom',
    theme: 'clean'
});

clipboard.on('success', function(e) {
    //Change the tooltip content and show for two seconds
});

<button class="btn" data-clipboard-text="Testing...123" data-tippy-content="Tooltip">
    Copy to clipboard
</button>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>

Answer 1

您只需要获取 tippy 对象的实例并在您的事件侦听器中调用它的一些方法。

var clipboard = new ClipboardJS('.btn');

const btnTippy = tippy('.btn', {
    placement: 'bottom',
    theme: 'clean',
})[0]; // 0-index used because tippy will return array of buttons here. You can use `querySelector` that will return only one instance if don't need array.

const copiedTippy = tippy('.btn', {
    placement: 'bottom',
    theme: 'clean',
    trigger: '',
})[0];

copiedTippy.setContent('Just copied')

clipboard.on('success', function (e) {
    copiedTippy.show()
    setTimeout(copiedTippy.hide, 2000) // to hide tip after 2 seconds
});

通过 Tippy js v6 更改工具提示内容

Change tooltip content by Tippy js v6

javascript

tooltip

tippyjs