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

Question

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?

Try `$(function () { $('[data-toggle="tooltip"]').tooltip() })` if you're using bootstrap 4? — Rob Lao, Dec 14 '22 at 10:02
[Bootstrap tooltip $(...).tooltip is not a function](https://stackoverflow.com/questions/60116666/bootstrap-tooltip-tooltip-is-not-a-function) — steven7mwesigwa, Dec 14 '22 at 10:35
[Uncaught TypeError: $(...).tooltip is not a function](https://stackoverflow.com/questions/41961708/uncaught-typeerror-tooltip-is-not-a-function) — steven7mwesigwa, Dec 14 '22 at 10:40
[TypeError: $(…).tooltip is not a function](https://stackoverflow.com/questions/38505350/typeerror-tooltip-is-not-a-function) — steven7mwesigwa, Dec 14 '22 at 10:42
I have seen those Stack Overflow questions, but they didn't help. The versions I'm using are jQuery: 3.6.2, Popper.js: 2.11.6 and Bootstrap: 5.2.3 — Roel Jansen, Dec 14 '22 at 10:55

steven7mwesigwa · Answer 1 · 2022-12-14T13:27:50.750

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;

edited Dec 14 '22 at 13:27

answered Dec 14 '22 at 11:12

steven7mwesigwa

5,701
3
20
34

The latest version of Laravel is using Vite instead of Laravel Mix. Vite doesn't support `require()`, instead `import` is used. – Roel Jansen Dec 14 '22 at 13:23
@RoelJansen Please, check my edited answer for use of `import` statements. – steven7mwesigwa Dec 14 '22 at 13:28
that edit is actually correct and does make it work. But I'm under the impression that $.tooltip() should be working using Bootstrap 5 (see my comment in the other answer). – Roel Jansen Dec 14 '22 at 13:43

score 0 · Answer 2 · answered Dec 14 '22 at 12:17

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.

answered Dec 14 '22 at 12:17

Flame

6,663
3
33
53

1

I don't think getting rid of *jQuery* is the best alternative for every use case. I.e: In cases where your project depends on it. For example [DataTables](https://datatables.net/) – steven7mwesigwa Dec 14 '22 at 13:11
In addition, I think your answer isn't any different from mine which was posted an hour earlier. – steven7mwesigwa Dec 14 '22 at 13:19
Although I do not agree with you that jQuery isn't needed anymore at all, as there are many useful jQuery plugins such as Select2, your solution for the tooltip problem seems te be working. The strange thing is that I have another Laravel project (which is using Laravel Mix instead of Vite) that also uses Bootstrap 5 where tooltip() actually does work! So maybe it's a Vite issue. – Roel Jansen Dec 14 '22 at 13:30
@steven7mwesigwa yes but you give a copypaste answer to the problem while I explicitly state that you do not need jQuery at all, hopefully inciting more thought for the developer :). The reason why I made an answer is because I didn't see any mention about jQuery – Flame Dec 14 '22 at 16:22
@RoelJansen I think the developer of Select2 wished to not have jQuery as a dependency anymore: https://github.com/select2/select2/issues/6196 . I think everyone has been reconsidering jQuery for a few years now since you can do almost all of it with the same amount of javascript. So the dependency becomes unnecessary and it's often a shortcut because people are more familiar with the `$(...)` syntax. – Flame Dec 14 '22 at 16:26

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

Dependencies

2 Answers2