jquery - 如何使用 jQuery 使用 bootstrap 5 popover?

标签 jquery twitter-bootstrap popover bootstrap-5 bootstrap-popover

我想使用 jQuery 在弹出窗口中显示 div 内容。

在 Bootstrap 3 中它工作正常。但在 BS-5 中它不起作用。

这是我的代码:

$('.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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45272a2a31363137243505706b756b74" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1e051b051a" rel="noreferrer noopener nofollow">[email protected]</a>/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>

请帮我解答一下!

提前致谢。

最佳答案

当然,只需等待 jQuery 在 DOM 中准备好,用 $(function () {}) 包装它

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

Demo

关于jquery - 如何使用 jQuery 使用 bootstrap 5 popover?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68015075/

相关文章:

javascript - 使用tinymce禁用/启用按钮

Jquery 验证不能正确验证数字?

html - 使用 CSS 动态调整表格中的 div 大小

objective-c - 更改日期时弹出窗口中的 NSDatePicker 图形表示

css - 样式化 Bootstrap 3 弹出框

javascript - 单个输入中的 ng-repeat 值,以逗号分隔

javascript - 这段代码有什么作用? "data.target == this"

javascript - 在 Bootstrap 中崩溃时动态更改事件链接类

css - Bootstrap : How to align Image tag and two <p> tags in a bootstrap div?

ios - 从 iPhone 上的弹出 View Controller 传回数据