如何在Bootstrap 5 Popovers中添加按钮？尝试后未成功实现

问题分析 #

你的代码存在几个关键问题导致按钮无法正常显示或工作：

• HTML中存在语法错误：<a href="# class="text-decoration-none text-dark">的href属性缺少闭合引号，会干扰DOM解析。
• 同时通过HTML的data-bs-content属性和JS初始化设置content，可能导致配置冲突。
• 若使用Bootstrap 5，默认不依赖jQuery，直接用jQuery初始化需要确保引入了兼容的Bootstrap jQuery版本及正确的加载顺序。

修复后的代码示例 #

修复后的HTML

<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title">
    <div class="card position-relative">
        <div class="d-block card-icon">
            <img src="images.png" class="card-icon position-absolute start-0 end-0 m-auto rounded-circle mb-5 lazy" alt="Title">
        </div>
        <div class="card-body text-center mt-5 pt-5">
            <a href="#" class="text-decoration-none text-dark">
                <h5 class="card-title">Title</h5>
            </a>
            <p>A short description</p>
            <a href="#" class="btn btn-primary">More Details</a>
        </div>
    </div>
</div>

方案1：使用Bootstrap 5原生JS初始化（推荐，无需jQuery）

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const popoverTriggerList = document.querySelectorAll('.servicePOP')
        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => {
            return new bootstrap.Popover(popoverTriggerEl, {
                content: '<a href="#" class="btn btn-warning">Test link</a>',
                html: true
            })
        })
    })
</script>

方案2：使用jQuery初始化（需确保加载顺序：jQuery → Bootstrap JS）

<script>
    $(document).ready(function() {
        let servicePOP = '<a href="#" class="btn btn-warning">Test link</a>';
        $('.servicePOP').popover({
            content: servicePOP,
            html: true,
            title: 'Title'
        });
    });
</script>

额外注意事项 #

• 确保正确引入Bootstrap的CSS和JS文件（Bootstrap 5需引入bootstrap.bundle.min.js，它包含Popover依赖的Popper.js）。
• 如果使用data-bs-trigger="focus"，点击Popover内的按钮时弹窗会自动关闭，若想保持弹窗打开，可将触发方式改为click或自定义事件逻辑。

内容的提问来源于stack exchange，提问作者Mahmoud Khoravi