单击更改 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>

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

Change text of Bootstrap-vue Tooltip on click

javascript

vue-component

vuejs2

bootstrap-vue