bootstrap的提示工具tooltip在手机上也能用吗

Posted 2023-05-10

参考技术A 引入bootstrap jquery等

<a href="javascript:;" class="tooltips" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="编辑"><i class="icon-pencil"></i></a>

<script type="text/javascript">
$(function()
$(".tooltips").tooltip();//显示title
);
</script>

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

【中文标题】点击时更改 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>