CODEWITHSUNDEEP
javascriptvuejs2vue-componentbootstrap-vue
welcomegkm
welcomegkm

Reputation: 354

Change text of Bootstrap-vue Tooltip on click

i want to change Vue tooltip text on button click?

And when hover again it should show "copy text" again until i click again to change tooltip text.

<b-button variant="primary" id="copy">
   click here
</b-button>
<b-tooltip target="copy">
   copy text
</b-tooltip>

Note: I used Bootstrap-Vue for this tooltip.

Upvotes: 4

Views: 1541

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Add a data property called ``tooltipText` and update one you click on the button then reset it when the mouse leaves:

data(){
  return{
   tooltipText:'Copy text'
   }
}

template :

<b-button variant="primary" id="copy" @click="tooltipText='Text copied'" @mouseout="tooltipText='Copy text'">
   click here
</b-button>
<b-tooltip target="copy">
 {{tooltipText}}
</b-tooltip>

Upvotes: 1

Related Questions