点击时更改 Bootstrap-vue Tooltip 的文本

Posted 2023-02-23

【中文标题】点击时更改 Bootstrap-vue Tooltip 的文本

【英文标题】：Change text of Bootstrap-vue Tooltip on click

【发布时间】：2020-12-17 12:03:51

【问题描述】：

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

点击前的提示文字：复制文字 点击后的工具提示文本：文本已复制

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

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

注意：我使用Bootstrap-Vue 作为此工具提示。

【参考方案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>