twitter-bootstrapnpmtwitter-bootstrap-tooltip

$(...).tooltip is not a function using bootstrap 4 in npm webpack

I can't seem to get tooltips working in bootstrap 4 using npm webpack.

I've just installed these node vendors...

$ npm install jquery
$ npm install bootstrap
$ npm install popper.js --save

And I am requiring vendors like so...

global.jQuery = require('jquery/dist/jquery.min.js');

require('bootstrap/dist/js/bootstrap.js');
require('popper.js/dist/popper.min.js');

I've tried both the dist and src for bootstrap and popper.js.

I am calling the tooltips function like this after the required vendors.

(function ($) {

    // enable tooltips for everything
    $('[data-toggle="tooltip"]').tooltip();

})(jQuery);

And I am always getting this error...

enter image description here

Other bootstrap javascript functions work like modals etc.

If you want to test my exact setup, download a test project here and just run npm install and then npm run production and see the index.html for error.

Solution

  • Either import required plugins separately, or load all:

    require('bootstrap');

    Everything is well explained in the official documentation.

    Also many plugins depend on the $ symbol, so it's good to alias this one too:

    global.jQuery = global.$ = require('jquery');