我正在使用bootstrap 5创建一个网站，我希望有一个按钮，当用户单击它时，会出现一个弹出窗口。
我已经将jQuery和popper.js文件添加到我的文件中。然而，当我点击按钮时，什么也没发生。我已经检查了控制台，它似乎没有显示任何错误。我不知道出了什么问题。
这是我的按钮代码。
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."><i class="fas fa-shopping-cart" style="color: #fff;">
Cart </i>
</button>这是我的jQuery代码
$(document).ready(() => {
$('[data-toggle="popover"]').popover();
});以下是我链接的jQuery和popper.js文件。
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>我想知道我是否链接了错误版本的文件，因为引导程序网站在这方面没有太大帮助。
用data-bs-*更改data-*属性(例如：data-toggle到data-bs-toggle等等(，并将脚本更改为下面提供的脚本以打开弹出窗口。
此外，请确保正确地包含Bootstrap资产，并且一切都应该正常。在您的情况下，您没有包含引导css文件，因此popover将显示为无样式。您可以再次查看下面的片段以了解更多详细信息。
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."><i class="fas fa-shopping-cart" style="color: #fff;">
Cart </i>
</button>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>不确定这是否为时已晚。。。但请尝试使用以下。。。
<p>This<a href="#" data-toggle="popover" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute."><i class="fas fa-shopping-cart" style="color: #fff;"></i></a> triggers a popover on click.</p>
$(document).ready(function() {
$("body").popover({ selector: '[data-toggle="popover"]' });
});
这里有用的答案。。。https://stackoverflow.com/a/22569369/6790839