I am trying to set html attribute in popover by using JavaScript in bootstrap 5. But I can’t.
Here is my popover code:
<button type="button" class="btn btn-secondary mx-3" id="popcart" data-bs-html="true"
data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-
content="Bottom popover">Cart(<span id="cart">0</span>) </button>
Java script code:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[id="popcart"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl,
{
html: true
})
})
document.getElementById("popcart").setAttribute('data-bs-content','<h5>Cart</h5>')
>Solution :
Just move setAttribute before all code like:
document.getElementById("popcart").setAttribute('data-bs-content', '<h5>Cart</h5>');
var popoverTriggerList = [].slice.call(document.querySelectorAll('[id="popcart"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl,
{
html: true
})
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button type="button" class="btn btn-secondary mx-3" id="popcart" data-bs-html="true" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs- content="Bottom popover">Cart(<span id="cart">0</span>) </button>