How to enable and initialize bootstrap popovers

Question

I am currently trying to incorporate some popovers into my webpage but have run into a wall.

I created a few button popovers in my footer, but nothing happens when you click them.

I made a js file for the initialization and imported it at the end of my page, along with the bootstrap bundle needed to run it, but am getting an error in the console, which is:

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)

My full code is below. Thanks!

Scripts on HTML document:

<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>

The html for the popovers:

<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 file:

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

Answer 1

In the markup the data-bs-toggle attribute has an extra space which may be the cause of it not working. Without it, your example works. See below.

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>