Question

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

未捕获TypeError：$（...）。tooltip不是函数

未捕获的TypeError：$（...）。popover不是函数

除了删除从Laravel安装中获得的评论之外，我在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似乎有问题，因为它适用于工具提示和弹出组件。

Answer 1

尝试改为

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

＆＃34;苗条＆＃34; jQuery dist排除了一些正确注册tooltip作为jQuery插件所必需的功能。

Answer 2

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

<块引用>

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

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

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

2 个答案: