CODEWITHSUNDEEP
javascriptjquerycssvue.jsbootstrap-4
havingaheadache
havingaheadache

Reputation: 63

How to only show Bootstrap tooltip on click only inside Vue Component? (hide on hover)

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">
    `,
};

Upvotes: 1

Views: 853

Answers (2)

havingaheadache
havingaheadache

Reputation: 63

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

Upvotes: 1

nickypangers
nickypangers

Reputation: 116

try this:

mounted() {
    $(document).ready(function () {
        $(“#tooltipLink”).tooltip({
            trigger: “click”,
        });
    });
}

Upvotes: 1

Related Questions