My Bootstrap 5 popovers seem to be missing the arrow and I suspect it's because of interference from the parent element. The documentation provides a solution by using the container: 'body' option on a single item. How can I apply this to all items at once?
I am bundling everything using CodeKit3. The import statement appears as follows (which is functioning correctly):
// Bootstrap components
import '@popperjs/core/lib/index.js'
import bootstrap from 'bootstrap/dist/js/bootstrap.min.js'
This is the HTML structure I'm working with:
<div class="card">
<div class="card-header">
<i class="fas fa-calendar-day"></i> 24-h
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
Highest temp
</div>
<div class="col-3">
<span class="card-value" id="max-celsius-24h">24</span><span class="card-value">°C</span>
</div>
<div class="col-3">
<a href="#" data-bs-toggle="popover" data-bs-placement="top"
title="Additional Information"
data-bs-content="Some sample text goes here"><i
class="fas fa-info" id="maxCelsius24hInfo"></i></a>
</div>
</div>
<div class="row">
<div class="col-6">
Lowest temp
</div>
<div class="col-3">
<span class="card-value" id="min-rh-24h">12</span><span class="card-value">°C</span>
</div>
<div class="col-3">
<a href="#" data-bs-toggle="popover" data-bs-placement="top" data-container="body"
title="Additional Information"
data-bs-content="Some other sample text goes here"><i
class="fas fa-info" id="minCelsius24hInfo"></i></a>
</div>
</div>
</div>
</div>
Snippet from Bootstrap 5 docs:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
The only way the documentation demonstrates implementing the container option is like so:
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
I want to utilize the container: 'body' option in the initial example with the map() function. Any suggestions on how to achieve that?
Thank you!