Question 16686 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel 9 $(…).tooltip is not a function

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?

Tags:

2

Answers


  1. 0

    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:

    import * as Bootstrap from "bootstrap";
window.Bootstrap = Bootstrap;
    Login or Signup to reply.
  2. 0

    Do yourself a favour and get rid of jQuery entirely now you’re in the starting phase of a project. Bootstrap 5 no longer needs jQuery as a dependency, and to be fair as a developer you do not need it anymore either. Almost anything that jQuery offers can be done with a similar amount of code in plain javascript (for instance $('.myclass') == document.querySelectorAll('.myclass')). This makes your code more portable and saves a few cycles on pageload.

    Using the Bootstrap 5 docs, there is an example given on how to load the tooltips:

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

    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl);
});

    In other words: attach the data-bs-toggle="tooltip" attribute to an element of your choice.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search