I want to show a tooltip with the message "Copied!" when the button is clicked and make it disappear after a few seconds. Most of the answers I saw was using jQuery, is there a way to make it on Vue.js without too much resources?
My button is made and already have a function that onClick copy a code and I can use this function to show the tooltip as well.
I was thinking in something like this:
<!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)
}
You can try like in following snippet:
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>