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

Question

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

Just a side note: a tool-tip is intended for giving some information about what you are about to do, before you do it. If you display it only on click, it defeats the very purpose of having a tool-tip and is not very good in terms of user experience and usability — secan
– secan, Commented Aug 20, 2021 at 11:00

nickypangers · Accepted Answer · 2021-08-20 11:10:21Z

1

try this:

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

answered Aug 20, 2021 at 11:10

nickypangers

1166 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

havingaheadache · Accepted Answer · 2021-08-20 11:27:52Z

1

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

answered Aug 20, 2021 at 11:27

havingaheadache

635 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related