I’m trying to setup Bootstrap popovers and I’m getting the following error in the console:
s.createPopper is not a function
at je._createPopper (tooltip.js:375:19)
at je.show (tooltip.js:214:25)
at tooltip.js:509:14
I have initialized the popovers per the docs with:
// Initialize Tooltips
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
The components are attached to buttons:
<section class="container">
<div class="display-3 mt-5 m-5 fw-lighter text-uppercase">sponsors</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 align-items-center justify-content-evenly">
<div id="happy-ifood" class="col sponsor__img rounded-3 border border-info my-3 p-3">
<img class="w-100 h-100" src="img/food-sponsor.png" alt="Happy Food: food sponsor">
<button class="btn btn-info learn-more text-capitalize text-white" type="button" data-bs-toggle="popover" data-bs-container="happy-ifood" data-bs-title="Happy iFood" data-bs-content="Happy iFood trucks will be on-site with 8 different cuisine options.">learn more</button>
</div>
</div>
</section>
The styling for the surrounding elements are:
.sponsor__img {
display: block;
width: 25rem;
height: 20rem;
position: relative;
/* margin: 2rem;
padding: 1rem; */
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.learn-more {
height: max-content;
width: max-content;
font-size: 1.8rem;
bottom: 0;
}
The error is occurring at the return value of the _createPopper(tip)
function in the tooltip.js file. I would like some direction on what’s happening here. Thanks.