Quiero mostrar una información sobre herramientas con el mensaje "¡Copiado!" cuando se hace clic en el botón y hacerlo desaparecer después de unos segundos. La mayoría de las respuestas que vi estaban usando jQuery, ¿hay alguna manera de hacerlo en Vue.js sin demasiados recursos?
Mi botón está hecho y ya tiene una función que onClick copia un código y puedo usar esta función para mostrar la información sobre herramientas también.
Estaba pensando en algo como esto:
<!DOCTYPE html> <html> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Basic Tooltip</h2> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div> <p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p> </body> </html> copyClick(code) { const payload = { document: --- , id: ---, status: ---, } Service.saveEvent ({payload}); ClipboardService.copy(code) }Puedes probar como en el siguiente fragmento:
new Vue({ el: '#demo', data() { return { tool: false, text: "Copied!" } }, methods: { showTool() { this.tool = true setTimeout(() => this.tool = false, 3000) }, copyClick() { this.showTool() // your code } } }) .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; top: -.5rem; right: -8rem; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo" style="text-align:center;"> <button @click="copyClick">Copy</button> <h2>Basic Tooltip</h2> <p>Move the mouse over the text below:</p> <div @mouseover="showTool" class="tooltip">Hover over me <span v-show="tool" class="tooltiptext">{{ text }}</span> </div> <p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p> </div>