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

Question

我使用剪贴板js复制粘贴内容，并有一个工具提示附加到按钮由Tippy。

但是，只要触发剪贴板成功事件，我如何更改工具提示内容并使其显示2秒？我想不出一种改变内容的方法，因为我使用的不是支柱，而是属性方法。

可能相关的医生：

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