Laravel 9中$(...).tooltip is not a function报错解决咨询

错误原因 #

Bootstrap 5彻底移除了对jQuery的依赖，同时不再提供jQuery版本的插件接口，所以你无法再用$(...).tooltip()这种jQuery风格的方式调用Bootstrap的tooltip组件。

解决方案 #

直接使用Bootstrap 5原生的JavaScript API初始化tooltip，替换你原来的jQuery调用代码：

修改你的bootstrap.js文件，将最后一行的jQuery调用替换为以下代码：

// 自动初始化所有带有data-bs-toggle="tooltip"属性的元素
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(element => {
    new bootstrap.Tooltip(element);
});

如果你需要保持类似原代码中“针对body下元素”的选择逻辑，可以改成：

document.querySelectorAll('body [data-bs-toggle="tooltip"]').forEach(element => {
    new bootstrap.Tooltip(element);
});

额外说明 #

• 你当前的依赖版本（Bootstrap 5.2.3、Popper 2.11.6、jQuery 3.6.2）都是兼容的，无需调整版本。
• 不需要再手动挂载window.Popper，Bootstrap 5会自动处理Popper的依赖导入。

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