未捕获的 TypeError: $(...).tooltip 不是 Laravel 应用程序中的函数（Bootstrap 4 预设）

Posted 2023-03-14

【中文标题】未捕获的 TypeError: $(...).tooltip 不是 Laravel 应用程序中的函数（Bootstrap 4 预设）

【英文标题】：Uncaught TypeError: $(...).tooltip is not a function in Laravel application (Bootstrap 4 preset)

【发布时间】：2018-07-05 16:19:12

【问题描述】：

我正在使用 php 框架 Laravel 构建一个应用程序。我正在使用Bootstrap 4 preset 并安装了一个新项目。一切正常，css，甚至是您从导航栏中获得的下拉菜单。但是由于某种原因，当我尝试通过执行this 来初始化工具提示时，我的控制台中出现了 Typerror。还尝试通过工具提示类初始化工具提示，但这似乎也不起作用。 popover 组件也有同样的问题。

未捕获的类型错误：$(...).tooltip 不是函数

未捕获的类型错误：$(...).popover 不是函数

除了删除从 Laravel 安装中获得的 cmets 之外，我在 JS 中没有进行任何更改。

bootstrap.js

window._ = require('lodash');

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

//Jquery for Bootstrap
try 
    window.$ = window.jQuery = require('jquery/dist/jquery.slim');

    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');

app.js

//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 init
$(function () 
    $('[data-toggle="tooltip"]').tooltip()
)

html/刀片

<i class="ion-help-circled" data-toggle="tooltip" data-placement="top" title="Dit is het adres waarop de website staat tijdens de testfase"></i>

还尝试在我的刀片文件中的常规脚本下方包含工具提示初始化，但同样，似乎不起作用。

<!-- Scripts -->
<script src=" asset('js/app.js') "></script>
<script>

$(function () 
  $('[data-toggle="tooltip"]').tooltip()
);

</script>

我猜这似乎是popper.js的问题，因为它适用于工具提示和popover组件。

【问题讨论】：

将//Tooltip init $(function () $('[data-toggle="tooltip"]').tooltip() ) 静态放入你的脚本标签中

已经试过了，看我的最后一段。我将编辑我的帖子，因为我认为我的意思不够清楚。

你是在bootstrap完全加载后调用函数吗？

尝试使用 esm 版本而不是 umd。

@btl 你能举个例子吗？我猜 Laravel 这样做是有原因的..

【参考方案1】：

试试吧

window.$ = window.jQuery = require('jquery'); // <-- main, not 'slim'
window.Popper = require('popper.js');
require('bootstrap');

“slim”jQuery dist 排除了一些将tooltip 正确注册为 jQuery 插件所必需的功能。

【参考方案2】：

最终，问题在于tooltip() 并非始终存在于 jQuery UI 中。它是在 1.9 版本中添加的...

添加的版本：1.9（来源：API.jQueryUI.com: Tooltip Widget。）

如果您没有 1.9 或更高版本的 jQuery UI，您将收到错误消息：tooltip() is not a function()。