2 months ago

How to load Popper.js for use by Bootstrap 4?

Posted 2 months ago by DLUK44

I have a Laravel 5.5 project that uses Bootstrap 4. This is all working expect for things that need Popper.js

For example, the tooltop here just shows the HTML, it doesn't render it.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
            Tooltip with HTML

So, my problem seems to be that I haven't loaded popper.js (although I am not seeing any error message to saying that in the console) but I don't know how I should do that. According to the Bootstrap 4 documentation it needs to be loaded before bootstrap. Where would I load it if I wanted to do this the Laravel way (and I assume use Laravel Mix?)

My Webpack.mix.js file looks like this...

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

    jquery: ['$', 'window.jQuery', 'jQuery'],
    'popper.js/dist/umd/popper.js': ['Popper']

mix.js('node_modules/popper.js/dist/popper.js', 'public/js').sourceMaps();
mix.js('resources/assets/js/app.js', 'public/js').sourceMaps();

mix.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/com.scss', 'public/css');

], 'public/css/com.css');

mix.copy('resources/assets/js/thirdparty/gauge.min.js', 'public/js/gauge.min.js');

mix.js('resources/assets/js/com.js', 'public/js').version();

mix.copyDirectory('resources/assets/images', 'public/img/');

I think I must have added the popper.js line after trying to resolve this issue previously.

The top of my Bootstrap.js file looks like this...

window._ = require('lodash');

import Popper from 'popper.js/dist/umd/popper.js';

try {
    window.Popper = Popper;    
    window.$ = window.jQuery = require('jquery');    
  } catch (e) {}

Again, I added the Popper bits to try to resolve this problem but I don't really understand the JS parts of Laravel so although it doesn't cause an error message it doesn't solve the problem either.

Grateful for any guidance on this.

Thanks. David.

Please sign in or create an account to participate in this conversation.