Estoy usando portapapeles js para copiar y pegar contenido y hay una información sobre herramientas adjunta al botón por Tippy js.
Pero, ¿cómo cambio el contenido de la información sobre herramientas y hago que aparezca durante dos segundos mientras se activa el evento de éxito del portapapeles? No puedo pensar en una forma de cambiar el contenido porque no estoy usando el accesorio sino el método de atributo.
Posible documento relacionado:
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>Solo necesita obtener una instancia de su objeto tippy y llamar a algunos métodos en su detector de eventos.
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 });