Laravel（Bootstrap4预设）中$(...).tooltip不是函数的错误问题

嘿，我看了你在Laravel项目里遇到的Bootstrap tooltip和popover报错问题，这个我之前踩过坑，刚好能帮到你！你遇到的$(...).tooltip is not a function报错，主要是两个原因：用了精简版的jQuery，以及Popper.js的引入方式不对，下面给你一步步的修复方案：

一、替换精简版jQuery为完整版本 #

你在bootstrap.js里引入的是jquery.slim，这个版本移除了Bootstrap交互组件（比如tooltip、popover）依赖的核心功能，比如深层数据处理、部分事件绑定方法，导致Bootstrap没法给jQuery扩展这些方法。

打开resources/js/bootstrap.js，把这一行：

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

改成完整版本的jQuery：

window.$ = window.jQuery = require('jquery');

二、修正Popper.js的引入方式 #

Popper.js的UMD模块需要明确引入default导出，否则Popper对象可能未正确挂载，导致tooltip/popover找不到依赖。

把Popper的引入代码改成：

window.Popper = require('popper.js').default;

修改后的完整bootstrap.js代码如下：

window._ = require('lodash');

// Popper for Jquery/Bootstrap
window.Popper = require('popper.js').default;

// Jquery for Bootstrap
try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
} catch (e) {}

// Axios for AJAX Calls
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

三、重新编译前端资源 #

修改完依赖后，必须重新编译才能让改动生效，在项目根目录运行：

npm run dev
# 生产环境可以用 npm run prod 生成压缩后的文件

四、确保Tooltip初始化时机正确 #

把tooltip的初始化代码放在app.js里，确保在jQuery和Bootstrap都加载完成后执行：

// Bootstrap application with dependencies
require('./bootstrap');

// Import Vue
window.Vue = require('vue');

// Vue components
Vue.component('example-component', require('./components/ExampleComponent.vue'));

// Vue init
const app = new Vue({
    el: '#app'
});

// Tooltip & Popover 初始化
$(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
    // 如果需要popover，加上这行
    $('[data-toggle="popover"]').popover();
});

额外检查项 #

• 确保Blade模板里只引入了编译后的app.js，不要重复引入其他版本的jQuery，避免冲突：

<script src="{{ asset('js/app.js') }}"></script>

• 检查你的HTML元素的data-toggle属性是否正确，比如你用的data-toggle="tooltip"是正确的格式。

这样修改之后，tooltip和popover应该就能正常工作了，我之前就是这么解决的，亲测有效~

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