How To Configure Webpack For Bootstrap4 Popups And Tooltips (popper.js)

I'm trying to update from bootstrap 4 alpha to beta and I'm using webpack! Up to now I've successfully migrated my code to be compatible, the only thing is that i cant get Tooltips

Solution 1:

In order to use bootsrap4 (beta) popups, tooltips, dropdown using laravel webpack mix you've to download popper.js along with bootstrap 4 .

npm install bootstrap:4.0.0-beta popper.js --save

After that you've to edit the resources/assets/js/bootstrap.js file to include popper.js:

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js/dist/umd/popper.js').default;

    require('bootstrap/js/src/dropdown');
    require('bootstrap/js/src/popover');
    require('bootstrap/js/src/tooltip');

} catch (e) {
}

At the end you've to also edit webpack.mix.js file:

mix.autoload({
    'jquery': ['$', 'window.jQuery', "jQuery", "window.$", "jquery", "window.jquery"],
    'popper.js/dist/umd/popper.js': ['Popper', 'window.Popper']
});

Solution 2:

This actually works for me:

let mix = require('laravel-mix');
let webpack = require('webpack');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .webpackConfig({
     plugins: [
       new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery',
         'window.jQuery': 'jquery',
         Popper: ['popper.js', 'default'],
       })
     ]
   })
   .version();

Solution 3:

After some investigations I figured out that the problem wasn't with the configuration but with the HTML code! Since i was migrating from bootstrap 4 alpha to beta i had to change the href="#currency-menu" to href="#" on the dropdown toogle so it looked has following

HTML Code

<liclass="nav-drop dropdown"><ahref="#"data-toggle="dropdown">{{ moneyCurrencyCode() }}</a><ulid="currency-menu"class="list nav-drop-menu dropdown-menu"><li><adata-toggle="currency"data-currency="MZN"href="#">MZN</a></li><li><adata-toggle="currency"data-currency="ZAR"href="#">ZAR</a></li><li><adata-toggle="currency"data-currency="USD"href="#">USD</a></li><li><adata-toggle="currency"data-currency="EUR"href="#">EUR</a></li></ul></li>