Complete example of popover usage #33744

mayur-ekbote · 2021-04-25T15:33:22Z

mayur-ekbote
Apr 25, 2021

Earlier, with jQuery, the use of popver was straightforward.
With jQuery no longer used, how does one use Popovers? Specifically if I am not using JS (pure HTML / Blazor)
What to do with the script provided in the document? Eg.
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})

A complete example would be of great help.

hax18 · 2021-04-25T23:42:46Z

hax18
Apr 25, 2021

I'm not sure if i really understand ur question, but u should already konw that popover in Bs5 still rely on a 3rd party library "Popper.js" !

And this piece of code will help to Initialize & Enable Popover on ur website.

 var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
 var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
 return new bootstrap.Popover(popoverTriggerEl)
 })

4 replies

mayur-ekbote Apr 26, 2021
Author

Yes. The documentation says that either I include the popper or use the js bundle.
The question is, were do I put the above code? Earlier, you could do a $(document). with jQuery. What to do now?

hax18 Apr 26, 2021

Popper must come first. Then Bootstrap and finally u have to put the code or the file contains that peice of code under the Poper.js

Example:

Poper Js

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

Bootstrap

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

Js Code

<script src="code.js"></script>

mayur-ekbote Apr 28, 2021
Author

Thanks. I was actually looking for this (I use blazor so I have no idea how to make js work)
Keeping it here in case someone comes looking for it:

<body>
....
....
....

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384- JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
    </script>

    <script>

      document.querySelectorAll('[data-bs-toggle="popover"]')
        .forEach(function (popover) {
        new bootstrap.Popover(popover)
        })
    </script>
</body>

hax18 Apr 28, 2021

You are welcome

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Complete example of popover usage #33744

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Bootstrap

Complete example of popover usage #33744

mayur-ekbote Apr 25, 2021

Replies: 1 comment · 4 replies

hax18 Apr 25, 2021

mayur-ekbote Apr 26, 2021 Author

hax18 Apr 26, 2021

mayur-ekbote Apr 28, 2021 Author

hax18 Apr 28, 2021

mayur-ekbote
Apr 25, 2021

Replies: 1 comment 4 replies

hax18
Apr 25, 2021

mayur-ekbote Apr 26, 2021
Author

mayur-ekbote Apr 28, 2021
Author