Change text of Bootstrap-vue Tooltip on click

2
votes

i want to change Vue tooltip text on button click?

  • Tooltip text before click: copy text
  • Tooltip text after click: text copied

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.

1
javascriptvuejs2vue-componentbootstrap-vue

1 Answers

0
votes

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>