让 popper 在我的 squarespace 网站上工作

问题描述 投票:0回答:1

我正在尝试将 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 &amp; winners <i class="bi bi-question-circle"></i>
     </td>
     <td><span class="text-success">&#10004;</span></td>
     <td><span class="text-success">&#10004;</span></td>
     <td><span class="text-success">&#10004;</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">
javascript bootstrap-5 squarespace popper.js
1个回答
0
投票

您需要实例化所有工具提示,如官方Bootstrap文档中所述:

出于性能原因选择使用工具提示,因此

您必须初始化 他们自己

您可以使用以下代码来完成此操作:

document.querySelectorAll('[data-bs-toggle="tooltip"]') .forEach(tooltip => { new bootstrap.Tooltip(tooltip) })
查看

现场演示

© www.soinside.com 2019 - 2024. All rights reserved.