Laravel 9 $(...).tooltip is not a function-CodePudding

I'm using a fresh installation of Laravel Framework 9.43.0.

Bootstrap and jQuery are working fine, except voor tooltip(). It's giving me this error:

Uncaught TypeError: $(...).tooltip is not a function

I tried a lot of different combinations of importing JS libraries. This is my current bootstrap.js:

import _ from 'lodash';
window._ = _;

import $ from 'jquery';
window.$ = window.jQuery = $;

import * as popper from '@popperjs/core';
window.Popper = popper;

import 'bootstrap';

$('body').tooltip({
    selector: '[data-bs-toggle="tooltip"]',
});

Dependencies

jQuery: 3.6.2
Popper.js: 2.11.6
Bootstrap: 5.2.3

How can I make tooltip() work?

CodePudding user response：

I believe in Bootstrap 5 the tooltip() method has been moved to the jQuery.fn.tooltip namespace, so you will need to use it as $.fn.tooltip() instead of just $.tooltip().

Try using the bs.tooltip event to create tooltips in Bootstrap 5.

Here is an example of how you can use the bs.tooltip event to create a tooltip in your code:

$('body').on('bs.tooltip', '[data-bs-toggle="tooltip"]', (event) => {
    $(event.target).tooltip({
        title: "Tooltip content goes here",
    });
});

In this example, we are using the on() method to bind an event listener for the bs.tooltip event on the body element. Then, when the event is triggered, we are using the tooltip() method to create the tooltip.

CodePudding user response：

Use this instead:

(() => {
    // Initialize all tooltips on a page.

    [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        ?.map(function (tooltipTriggerEl) {
            return new window.Bootstrap.Tooltip(tooltipTriggerEl);
        });
})();

Reference:

https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere

In addition, instead of:

import 'bootstrap';

Use this:

window.Bootstrap = require("bootstrap/dist/js/bootstrap.min");