How to use bootstrap 5 popover using jQuery?

Question

I want to show a div content in popover using jQuery.

In Bootstrap 3 it works fine. But in BS-5 it not working.

Here Is my code:

$('.popper').popover({
    placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});

body {
    padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<a class="popper btn btn-outline-warning" data-trigger="hover" data-toggle="popover">Hover me</a>
<div class="popper-content d-none">My popover content goes here.</div>

Please help me to figure it out!

Thanks in advance.

The problem is because you're using the Bootstrap 3 `popover()` logic. Bootstrap 5 removed the reliance on jQuery so the code needs to change. [Read the docs](https://getbootstrap.com/docs/5.0/components/popovers/) — Rory McCrossan, Jun 17 '21 at 07:51

score 4 · Accepted Answer · answered Jun 17 '21 at 09:47

Sure, just wait for jQuery to be ready in the DOM by wrapping it with $(function () {})

$(function () {
    $('.popper').popover({
        placement: 'bottom',
        container: 'body',
        html: true,
        content: function () {
            return $(this).next('.popper-content').html();
        }
    })
})

Demo

How to use bootstrap 5 popover using jQuery?

1 Answers1