I am using Bootstrap ToolTip to display notice only when the button is clicked, inside Vue component. However, the tooltip still show when on hover, which is unintended. I've tried to use jQuery inside the vue component to achieve the result but failed. May I ask how to show Bootstrap tooltip on click only?
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">
`,
};
Further information: For the tooltip to disappear automatically, I've used the following method:
tooltipLink.addEventListener("click", () => {
setTimeout(() => {
$("#tooltipLink").tooltip("hide");
}, 1500);
});
Hope it also helps others facing the same problem
try this:
mounted() {
$(document).ready(function () {
$(“#tooltipLink”).tooltip({
trigger: “click”,
});
});
}