I am having a challenge with Bootstrap ToolTip in my Vue component. I only want the notice to show when the button is clicked, not on hover as it currently behaves. I attempted using jQuery within the Vue component without success. Can someone please advise on how to display the Bootstrap tooltip only on click?
const linkButton = {
props: ["url"],
data() {
return {
toolTipTitle: "Link Copied",
currentUrl: this.url,
};
},
methods: {
copy: function () {
var copyText = document.getElementById("myInput");
// copyText.value = window.location.href
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
console.log(copyText.value);
},
toolTipClicked: function () {
this.copy();
console.log("Tool Tip Clicked");
},
},
template: /*html*/ `
<a @click.prevent="toolTipClicked" class="ml-4" href="#" id="tooltipLink" data-toggle="tooltip" :title="toolTipTitle">
<svg width="21" height="21" viewBox="0 0 21 21" fill="none"
xmlns="http://www.w3.org/2000/svg"> ... </svg>
</a>
<input type="text" style="position: absolute; left: -1000px; top: -1000px" :value="currentUrl" id="myInput">
`,
};