Rails 7中用jsbundling+esbuild启用Bootstrap Tooltip失败求助

问题根源 #

Bootstrap 5 不再默认将Tooltip等插件挂载到jQuery的$原型对象上，这和Bootstrap 4的行为完全不同。你当前直接调用$('body').tooltip()会报错，核心原因就是jQuery对象上没有这个方法。

解决方案 #

方案1：使用Bootstrap原生API初始化（推荐，无需依赖jQuery） #

Bootstrap 5官方推荐用原生JavaScript方式初始化插件，不需要依赖jQuery：

// app/javascript/application.js
import { Tooltip } from 'bootstrap';
import '@popperjs/core'; // Popper是Tooltip的必需依赖，确保已导入

// 等待DOM加载完成后再初始化所有Tooltip
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(element => {
    new Tooltip(element);
  });
});

方案2：手动绑定Bootstrap插件到jQuery（保留jQuery写法） #

如果必须沿用jQuery调用方式，需要手动导入Bootstrap的jQuery兼容包，让Bootstrap把插件挂载到jQuery对象上：

// app/javascript/application.js
window.jQuery = window.$ = require('jquery');
require('@popperjs/core');

// 导入Bootstrap的jQuery兼容打包文件，会自动完成插件挂载
require('bootstrap/dist/js/bootstrap.bundle.min.js');

// 等待DOM就绪后执行Tooltip初始化
$(function() {
  $('[data-bs-toggle="tooltip"]').tooltip();
});

额外排查步骤 #

1. 确认依赖安装完整：执行npm install（或yarn install），确保@popperjs/core、bootstrap等依赖无报错安装完成。
2. 检查打包结果：在Chrome开发者工具的Sources面板中搜索Tooltip，确认Bootstrap的代码已被打包到最终JS文件中。
3. 验证DOM加载时机：确保初始化代码在DOM完全渲染后执行，避免因元素未加载导致的隐性问题（上述两种方案已处理该问题）。

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