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>')
You can use spread to convert querySelectorAll collections to array:
[...document.querySelectorAll(someSelector)].map(...)
BUT
IDs need to be unique
const cart = document.getElementById("popcart");
cart.setAttribute('data-bs-content', '<h5>Cart</h5>');
var popoverList = new bootstrap.Popover(cart, { 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>If you have more than one, use a class
const popoverList = [...document.querySelectorAll(".popcart")].map(but => {
but.setAttribute('data-bs-content', '<h5>Cart</h5>');
return new bootstrap.Popover(but, {
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="popcart btn btn-secondary mx-3" 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>
<button type="button" class="popcart btn btn-secondary mx-3" 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>Just move setAttribute before all code like: (see update below)
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>I had missed a giant mistake, the id must be unique instead use data-id like:
document.querySelector('[data-id="popcart"]').setAttribute('data-bs-content', '<h5>Cart</h5>');
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-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" data-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>