如何解决如何使用 jQuery 使用 bootstrap 5 popover?
我想使用 jQuery 在 popover 中显示一个 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/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>
请帮我弄清楚!
提前致谢。
解决方法
当然,只需用 $(function () {})
包装它,等待 jQuery 在 DOM 中准备就绪
$(function () {
$('.popper').popover({
placement: 'bottom',container: 'body',html: true,content: function () {
return $(this).next('.popper-content').html();
}
})
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。