Bootstrap tooltip not working with jquery.slim when importing via webpack

user_369194 0
Viewed 572

I installed via npm bootstrap 4.6.0 and jquery 3.6.0.

This code is working:

import jQuery from "jquery/dist/jquery";
import "bootstrap/dist/js/bootstrap";
    
(function ($) {
    "use strict";   
    $("[data-toggle='tooltip']").tooltip()
})(jQuery);

This code instead is not working, with error Uncaught TypeError: $(...).tooltip is not a function

Notice that the only difference is that jquery slim is used in place of jquery.

import jQuery from "jquery/dist/jquery.slim";
import "bootstrap/dist/js/bootstrap";
    
(function ($) {
    "use strict";   
    $("[data-toggle='tooltip']").tooltip()
})(jQuery);

Other bootstrap functionalities (e.g. collapse) work even with slim.

It looks like for some reason bootstrap fails to load some functions, like tooltip (also tried with scrollspy, same problem)

I also tried to console.log($.fn) and actually with jquery slim I can't find a bunch of functions...

bootstrap-4 twitter-bootstrap webpack jquery javascript
1 Answers

According to the official documentation Tooltips Bootstrap:

Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js in order for tooltips to work!

So you need to install it between your jQuery and Bootstrap. Or you can just install bootstrap.bundle.min.js and bootstrap.bundle.js which already contains Popper.js.

user_132283830
Related