Laravel 6-Bootstrap 为什么 Popover 在没有错误的情况下不起作用？

Question

I am currently learning laravel via developing applications. I did quite a thing in backend but still having tough times when I encounter a front-end problem. I am using bootstrap scaffolding and want to create a form in 'popover'. I can do that later, now I just want to work this button out . I use the popover which is shown in bootstrap site. Popover Bootstrap I'm just putting a button in the page and want it to have a popover when clicked.

<button type="button" class="btn btn-secondary" data-container="body"
                        data-toggle="popover" data-placement="left"
                        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                        Popover on left

When I use the {{ asset('js/app.js') }} (I mean the local file in public/js/) I can't make it work. But when I use these cdn scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

and also add this script the bottom of body when I use cdn:

$(function () { $('[data-toggle="popover"]').popover()})

It works. But this can't be a solution I would like to continue using my inner files not the ones imported from cdn. According to my readings and observations, in app.js these scripts/functions are already included. Only showing the path of app.js as stated above in blade file, should be enough in that case. (I run 'npm install popper.js --save' also). I would like to have a way to work this button out with internal js files.

Extra: When I type 'Popper' on console it responds me the following code line. So as I understand, it is defined.

Popper(reference, popper) {
var _this = this;
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
classCallCheck(this, Popper);
this.scheduleUpdate…

Thanks in advance.

Answer 1

Edit a year later: I continue web development and when I saw this topic in my history I got wonder and read. I can imagine the problem when I see the issue and the reason that it didn't work back then is jquery needs to be imported or required before both popper.js and bootstrap. I should've understood that after inserting CDNs tho(by just looking the order). Text below belongs to a year ago and doesn't have any meaningful explanation.

Okay problem is solved in a very interesting way that I don't understand. Please share your comments if you have idea still. I deleted all cdn scripts, added window.Jquery = require('jquery'); to resources/js/bootstrap.js file & kept $(function () { $('[data-toggle="popover"]').popover()}) script under . Than I run npm run dev , after that it worked. It made no sense to me because there is a codeline in same file which includes jquery as I understand: try{ window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap');}.. try{ window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap');}.. try{ window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap');}.. After this I deleted the line which I added at the start window.Jquery = require('jquery'); and run npm run dev again, and it is still working. Now there is two things that I can think of: first; Once I added window.Jquery = require('jquery'); and started npm run dev did something to one of my files and erasing that line doesn't matter now, or nothing special happenning here I just did something reaaaly wrong before opennig this topic. Thanks.

Answer 2

Do you have window.Popper = require('popper.js').default; in your resources/js/bootstrap.js or in resources/js/app.js file?

Maybe you could post the code from your bootstrap and app js files?