I noticed my Bootstrap 5 popovers are missing the arrow and I believe it’s caused by the parent element interfearing somehow.
The docs are kind enough to offer help by showing me how to use the container: ‘body’ option – on ONE item. I need to apply that to all at once. How would I do that?
I’m using codeKit3 to bundle everything. The import statement looks like this (working):
// Bootstrap components
import '@popperjs/core/lib/index.js'
import bootstrap from 'bootstrap/dist/js/bootstrap.min.js'
This is the html I’m using:
<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">
högsta temp
</div>
<div class="col-3">
<span class="card-value" id="min-rh-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="Ytterligare information"
data-bs-content="Some sample text right here"><i
class="fas fa-info" id="maxCelsius24hInfo"></i></a>
</div>
</div>
<div class="row">
<div class="col-6">
lägsta 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="Ytterligare information"
data-bs-content="Some other sample data right here"><i
class="fas fa-info" id="minCelsius24hInfo"></i></a>
</div>
</div>
</div>
</div>
Code 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 shows how to implement the container option is like this:
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
I need to use the container: 'body'
option in the first example (the one with map()
). How would I do that?
Thank you!