如何使用 jQuery 使用 bootstrap 5 弹出框？

Posted 2023-05-08

【中文标题】如何使用 jQuery 使用 bootstrap 5 弹出框？

【英文标题】：How to use bootstrap 5 popover using jQuery?

【发布时间】：2021-09-02 00:08:10

【问题描述】：

我想使用 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>

请帮我弄清楚！

提前致谢。

【问题讨论】：

问题是因为您使用的是 Bootstrap 3 popover() 逻辑。 Bootstrap 5 删除了对 jQuery 的依赖，因此代码需要更改。 Read the docs

【参考方案1】：

当然，只要用$(function () ) 包裹起来，等待 jQuery 在 DOM 中准备就绪

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

Demo