如何在Nuxt 2中全局初始化并使用Bootstrap 5 Tooltip

前置准备 #

首先确保安装Bootstrap 5和其依赖的Popper.js：

npm install bootstrap @popperjs/core
# 或用yarn
yarn add bootstrap @popperjs/core

然后在nuxt.config.js中全局引入Bootstrap的CSS：

export default {
  css: [
    'bootstrap/dist/css/bootstrap.min.css'
  ]
}

方案一：按Bootstrap官方文档方式全局自动初始化 #

这种方式直接使用data-bs-toggle="tooltip"和data-bs-title属性，无需额外指令。

1. 在plugins目录下创建bootstrap-tooltip.client.js（.client.js后缀确保仅在客户端执行，避免服务端渲染时的DOM报错）：

import { Tooltip } from 'bootstrap'

export default () => {
  // 页面首次加载时初始化所有Tooltip
  document.addEventListener('DOMContentLoaded', initTooltips)

  // 路由切换后重新初始化（适配Nuxt单页应用的DOM更新）
  if (process.client) {
    window.onNuxtReady(() => {
      window.$nuxt.$router.afterEach(() => {
        setTimeout(initTooltips, 100) // 延迟确保新DOM已渲染完成
      })
    })
  }

  function initTooltips() {
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
      // 先检查是否已初始化，避免重复创建
      if (!Tooltip.getInstance(el)) {
        new Tooltip(el)
      }
    })
  }
}

2. 在nuxt.config.js中注册该插件：

export default {
  plugins: [
    '~/plugins/bootstrap-tooltip.client.js'
  ]
}

3. 页面中直接使用官方属性写法：

<button class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="这是一个Tooltip">
  悬停查看提示
</button>

方案二：自定义Vue指令（v-tooltip） #

如果偏好指令形式，可实现一个全局可用的v-tooltip指令：

1. 在plugins目录下创建v-tooltip.client.js：

import { Tooltip } from 'bootstrap'

export default ({ app }) => {
  app.directive('tooltip', {
    bind(el, binding) {
      // 支持自定义位置：v-tooltip:bottom="'提示文本'"
      const placement = binding.arg || 'top'
      const tooltipOptions = {
        title: binding.value,
        placement: placement
      }
      new Tooltip(el, tooltipOptions)
    },
    // 元素销毁时清理Tooltip，避免内存泄漏
    unbind(el) {
      const tooltipInstance = Tooltip.getInstance(el)
      if (tooltipInstance) {
        tooltipInstance.dispose()
      }
    }
  })
}

2. 在nuxt.config.js中注册插件：

export default {
  plugins: [
    '~/plugins/v-tooltip.client.js'
  ]
}

3. 使用指令：

<!-- 基础用法 -->
<button v-tooltip="'这是指令实现的Tooltip'">悬停查看</button>

<!-- 指定底部显示 -->
<button v-tooltip:bottom="'底部的提示'">悬停查看</button>

关于旧方案报错的说明 #

你之前遇到的$ is not defined错误，是因为旧版Bootstrap依赖jQuery，而Bootstrap 5已经完全移除了jQuery依赖，所以直接使用$会找不到对应的对象。现在的方案基于Bootstrap 5原生的Tooltip类实现，无需依赖jQuery。

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