javascriptbootstrap-5squarespacepopper.js

Get popper to work on my squarespace site

I'm trying to add popper.js to the pricing page on my Squarespace site. Following the instructions from a squarespace video, I added below to the <head> of my page under page settings -> advanced -> page header code injection.

<!-- 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">.

On my page, I've imbedded code in a code block (below). The bootstrap works unless I remove the bootstrap script from the bottom of the code block. The popper doesn't work at all.

I should callout that I don't have any code in the meta header or footer injections. How do I get popper to work?

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

  • You need to instantiate all tooltips, as stated in the official Bootstrap documentation:

    Tooltips are opt-in for performance reasons, so you must initialize them yourself.

    You do this with the following code:

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

    See the live demo.