如何让Popper.js在Squarespace定价页面正常工作？

问题根源分析 #

你当前的问题出在重复引入资源+脚本语法错误+未初始化Tooltip：

• 页眉注入的bootstrap.bundle.min.js脚本标签末尾多了个多余的.，导致脚本加载失败
• 代码块里重复引入了Bootstrap CSS和Popper.js，和页眉的资源冲突，这也是Bootstrap只能依赖代码块里的资源才能工作的原因
• Bootstrap 5的Tooltip组件不会自动初始化，必须手动调用初始化代码

具体修复步骤 #

1. 修正页眉注入的代码
   进入页面设置→高级→页面页眉代码注入，把现有代码里的错误修正，确保只保留一套Bootstrap资源（bootstrap.bundle.min.js已经内置Popper.js，无需单独引入）：

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.2.0/css/bootstrap.min.css">
   
   <!-- Bootstrap JavaScript (已包含Popper.js) -->
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.2.0/js/bootstrap.bundle.min.js"></script>
   

2. 清理代码块里的冗余资源
   把页面代码块里的以下两行完全删除：

   <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/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
   

3. 添加Tooltip初始化脚本
   在代码块的表格之后，添加这段初始化脚本，让Bootstrap的Tooltip功能生效：

   <script>
     // 初始化所有带data-bs-toggle="tooltip"的元素
     document.addEventListener('DOMContentLoaded', function() {
       const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
       tooltipTriggerList.forEach(tooltipTriggerEl => {
         new bootstrap.Tooltip(tooltipTriggerEl)
       })
     })
   </script>
   

验证效果 #

完成以上修改后刷新页面，鼠标悬停到带问号图标的单元格上，就能看到正常弹出的Tooltip，同时Bootstrap的样式也会稳定生效。

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