我正在尝试将 popper.js 添加到我的 Squarespace 网站上的定价页面。按照 squarespace 视频的说明,我在页面设置 -> 高级 -> 页面标题代码注入下将以下内容添加到页面的
<head>
中。
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.2.0/css/bootstrap.min.css">
<!-- Optional Bootstrap JavaScript with Popper.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.2.0/js/bootstrap.bundle.min.js">.
在我的页面上,我已将代码嵌入到代码块中(如下)。引导程序可以工作除非我从代码块的底部删除引导程序脚本。波普尔根本不起作用。
我应该指出,我没有在元页眉或页脚注入中有任何代码。我如何让波普尔工作?
<table class="table mb-0">
<thead>
<tr>
<th>Engagement and Interaction</th>
<th>Basic</th>
<th>Pro</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr class="table-row-hover">
<td data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Preselect the both the number of fan participants and the number of winners">
Odds setting for participants & winners <i class="bi bi-question-circle"></i>
</td>
<td><span class="text-success">✔</span></td>
<td><span class="text-success">✔</span></td>
<td><span class="text-success">✔</span></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js" integrity="sha512-TPh2Oxlg1zp+kz3nFA0C5vVC6leG/6mm1z9+mA81MI5eaUVqasPLO8Cuk4gMF4gUfP5etR73rgU/8PNMsSesoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
您需要实例化所有工具提示,如官方Bootstrap文档中所述:
出于性能原因选择使用工具提示,因此您可以使用以下代码来完成此操作:您必须初始化 他们自己。
document.querySelectorAll('[data-bs-toggle="tooltip"]')
.forEach(tooltip => {
new bootstrap.Tooltip(tooltip)
})
查看现场演示。