如何在Vue组件中设置Bootstrap tooltip仅点击触发、hover时隐藏

Bootstrap Tooltip默认触发事件为hover focus，你只需要手动初始化Tooltip时修改触发配置，结合Vue生命周期管理即可实现仅点击触发的效果，以下是完整修改方案：

步骤1：新增生命周期钩子初始化Tooltip #

根据你使用的Bootstrap版本选择对应实现即可：

Bootstrap 5 方案（推荐，无需jQuery） #

const linkButton = {
  props: ["url"],
  data() {
    return {
      toolTipTitle: "Link Copied",
      currentUrl: this.url,
      tooltipInstance: null // 存储tooltip实例方便后续操作
    };
  },
  // 组件挂载后初始化tooltip
  mounted() {
    const tooltipEl = document.getElementById('tooltipLink')
    this.tooltipInstance = new bootstrap.Tooltip(tooltipEl, {
      trigger: 'click', // 仅点击触发，覆盖默认hover+focus逻辑
      placement: 'top' // 可自行调整提示框弹出位置
    })
  },
  // 组件销毁前销毁tooltip实例，避免内存泄漏
  beforeUnmount() {
    if (this.tooltipInstance) {
      this.tooltipInstance.dispose()
    }
  },
  methods: {
    copy: function () {
      var copyText = document.getElementById("myInput");
      copyText.select();
      copyText.setSelectionRange(0, 99999);
      document.execCommand("copy");
      console.log(copyText.value);
    },
    toolTipClicked: function () {
      this.copy();
      // 可选配置：点击后2秒自动关闭提示，优化交互体验
      setTimeout(() => {
        this.tooltipInstance.hide()
      }, 2000)
      console.log("Tool Tip Clicked");
    },
  },
  template: /*html*/ `
    <a @click.prevent="toolTipClicked"  class="ml-4" href="#" id="tooltipLink" data-toggle="tooltip" :title="toolTipTitle">  
        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" 
        xmlns="http://www.w3.org/2000/svg"> ... </svg>
    </a>
    <input type="text" style="position: absolute; left: -1000px; top: -1000px" :value="currentUrl" id="myInput">
    `,
};

Bootstrap 4 方案（依赖jQuery） #

只需替换上述代码中的生命周期钩子部分即可：

mounted() {
  // 初始化时指定trigger为click
  $('#tooltipLink').tooltip({
    trigger: 'click',
    placement: 'top'
  })
},
beforeUnmount() {
  $('#tooltipLink').tooltip('dispose')
}

额外优化说明 #

如果你需要完全自定义触发逻辑（比如仅复制成功才显示提示，复制失败不显示），可以把trigger设为manual，完全通过代码控制提示的显示隐藏，不受任何默认事件影响：

// 初始化配置
{
  trigger: 'manual'
}
// 复制成功后手动调用显示
this.tooltipInstance.show()

注意：请关闭全局的Bootstrap Tooltip自动初始化逻辑，避免全局配置覆盖你单独给这个元素设置的trigger参数。

内容的提问来源于stack exchange，提问作者havingaheadache