通过Tippy JS V6更改工具提示内容

Question

我正在使用剪贴板JS复制Paste内容，并且Tippy JS附上了一个工具提示。

但是，只要启动剪贴板成功事件，我该如何更改工具提示内容并使其出现两秒钟？我无法想到一种更改内容的方法，因为我不是使用道具，而是属性方法。

可能相关的文档：

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