Estoy tratando de establecer el atributo html en popover usando JavaScript en bootstrap 5. Pero no puedo.
Aquí está mi código popover:
<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>Código de secuencia de comandos de Java:
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>')Puede usar spread para convertir las colecciones de querySelectorAll en una matriz:
[...document.querySelectorAll(someSelector)].map(...)PERO
Los ID deben ser únicos
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>Si tiene más de uno, use una clase
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>Simplemente mueva setAttribute antes de todo el código como: (vea la actualización a continuación)
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> Me había perdido un gran error, la identificación debe ser única en lugar de usar data-id como:
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>