How to enable and initialize bootstrap popovers-CodePudding

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 >
<li >
<button type="button"  data-bs-container="body" data-bs- 
toggle="popover" data-bs-placement="top" data-bs-content="Home Page">Home</button>
</li>
<li >
<button type="button"  data-bs-container="body" data-bs- 
toggle="popover" data-bs-placement="top" data-bs-content="Home Page">About</button>
</li>
<li >
<button type="button"  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))

CodePudding user response：

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 >
  <li >
    <button type="button"  data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Home Page">Home</button>
  </li>
  <li >
    <button type="button"  data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Home Page">About</button>
  </li>
  <li >
    <button type="button"  data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Home Page">Privacy 
Policy</button>
  </li>
</ul>