如何启用和初始化引导程序弹出窗口

Question

我目前正试图将一些弹出窗口合并到我的网页中，但遇到了麻烦。

我在页脚中创建了一些按钮弹出框，但当您单击它们时，不会发生任何事情。

我为初始化创建了一个js文件，并在页面末尾导入了它，以及运行它所需的引导包，但在控制台中出现了一个错误，即：

Uncaught TypeError: i.createPopper is not a function
at Fe.show (tooltip.js:273:29)
at Fe._enter (tooltip.js:598:15)
at Fe.toggle (tooltip.js:191:17)
at HTMLButtonElement.<anonymous> (tooltip.js:532:107)
at HTMLButtonElement.i (event-handler.js:102:15)

我的完整代码如下。谢谢

HTML文档上的脚本：

<script src="popover.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script src="function.js"></script>

弹出窗口的html：

<ul class="list-inline">
<li class="list-inline-item">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs- 
toggle="popover" data-bs-placement="top" data-bs-content="Home Page">Home</button>
</li>
<li class="list-inline-item">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs- 
toggle="popover" data-bs-placement="top" data-bs-content="Home Page">About</button>
</li>
<li class="list-inline-item">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs- 
toggle="popover" data-bs-placement="top" data-bs-content="Home Page">Privacy 
Policy</button>
</li>
</ul>

JS文件：

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new 
bootstrap.Popover(popoverTriggerEl))

Answer 1

在标记中，data-bs-toggle属性有一个额外的空间，这可能是它无法工作的原因。没有它，你的例子就行了。请参见下文。

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
<ul class="list-inline">
<li class="list-inline-item">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Home Page">Home</button>
</li>
<li class="list-inline-item">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Home Page">About</button>
</li>
<li class="list-inline-item">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Home Page">Privacy 
Policy</button>
</li>
</ul>