Bootstrap5 - Popover动态更新内容

最新推荐文章于 2024-06-02 19:16:33 发布

Lazyafei

最新推荐文章于 2024-06-02 19:16:33 发布

阅读量1.2k

点赞数

分类专栏： # Bootstrap 文章标签： html css

本文链接：https://blog.csdn.net/tfstone/article/details/119903458

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

5版本的Bootstrap Popover动态更新内容跟以往版本有所不同，先展示下效果：

主要逻辑是必须上传完成注册基本信息，才能通过popover查看；

主要代码如下：

1、HTML

#定义Popover

<button id="userRegisterInfo" style="float:right" type="button"
                                    class="btn btn-sm btn-secondary" title="用户注册信息" data-bs-trigger="hover click focus"
                                    data-bs-toggle="popover">查看用户注册信息</button>

#popover在css渲染完成后执行内容更新操作（重新刷新content内容）

exampleEl.addEventListener('shown.bs.popover', function () {
        popover.update();
        popover.setContent();
     })

2、JS

#开启popover

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

#动态赋值

var exampleEl = document.getElementById('userRegisterInfo')
    var popover = new bootstrap.Popover(exampleEl, {
        html: true, // 为true的话，data-content里就能放html代码了
        content: getRegisterInfo,
    })

参考官方文档：https://getbootstrap.com/docs/5.1/components/popovers/