Estoy usando Bootstrap ToolTip para mostrar un aviso solo cuando se hace clic en el botón, dentro del componente Vue. Sin embargo, la información sobre herramientas aún se muestra cuando se desplaza el mouse, lo cual no es intencionado. Intenté usar jQuery dentro del componente vue para lograr el resultado, pero fallé. ¿Puedo preguntar cómo mostrar la información sobre herramientas de Bootstrap solo al hacer clic?
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"> `, };Más información: para que la información sobre herramientas desaparezca automáticamente, he usado el siguiente método:
tooltipLink.addEventListener("click", () => { setTimeout(() => { $("#tooltipLink").tooltip("hide"); }, 1500); });Espero que también ayude a otros que enfrentan el mismo problema.
prueba esto:
mounted() { $(document).ready(function () { $(“#tooltipLink”).tooltip({ trigger: “click”, }); }); }