Vue3项目集成Bootstrap 5 tooltip后点击无响应问题咨询

存在的错误点 #

• 重复加载Bootstrap JS资源：全局main.js已经引入UMD格式的全量bootstrap.min.js，组件内又单独引入ESM格式的Tooltip模块，两种不同模块化规范的资源冲突导致初始化失败。
• 未匹配触发规则：Bootstrap 5 Tooltip默认触发规则为hover focus，你的需求是点击唤起需要主动配置触发参数；且你使用的<i>标签默认不可聚焦，默认的focus触发规则对该元素不生效。
• 未持久化存储Tooltip实例：直接在mounted钩子中创建实例未挂载到组件实例上，可能被垃圾回收机制回收导致功能失效。
• 组件卸载时未销毁实例，存在内存泄漏风险。

修复方案 #

1. 调整全局引入逻辑 #

仅在main.js保留Bootstrap全局CSS引入，删除全局JS引入，统一使用ESM模块化方式加载对应组件：

// main.js
import "bootstrap/dist/css/bootstrap.min.css";
// 移除该行：import "bootstrap/dist/js/bootstrap.min.js";

2. 调整组件初始化逻辑 #

<template> 
  <i
    class="fas fa-info-circle"
    data-bs-placement="top"
    title="Tooltip on top"
    ref="info"
    <!-- 若使用默认hover+focus触发，需加tabindex让元素可聚焦 -->
    <!-- tabindex="0" -->
  ></i>
</template>
<script>
import { Tooltip } from "bootstrap/dist/js/bootstrap.esm.min.js";

export default {
  mounted() {
    // 配置trigger为click实现点击唤起，无需点击则删除该参数即可
    this.tooltipInstance = new Tooltip(this.$refs.info, {
      trigger: 'click'
    })
  },
  beforeUnmount() {
    // 组件卸载时销毁实例
    this.tooltipInstance?.dispose()
  }
}
</script>

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