单击时更改 Bootstrap-vue 工具提示的文本

Question

我想在单击按钮时更改 Vue 工具提示文本？

• 单击前的工具提示文本：复制文本
• 单击后的工具提示文本：文本已复制

当再次悬停时，它应该再次显示“复制文本”，直到我再次单击以更改工具提示文本。

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

注意：我在这个工具提示中使用了Bootstrap-Vue 。

Answer 1

添加一个名为“tooltipText”的数据属性并更新您单击按钮的属性，然后在鼠标离开时重置它：

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

模板 ：

<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>