我正在使用剪貼板 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>
uj5u.com熱心網友回復:
你只需要獲取你的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
});
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/463208.html
下一篇:當我重繪我的頁面本地存盤資料消失
