Блог

Главная - Вопросы по программированию - Как добавить атрибут html-тега в bootstrap 5 popover setAttribute()?

Как добавить атрибут html-тега в bootstrap 5 popover setAttribute()?

#javascript #html #bootstrap-5

Вопрос:

Я пытаюсь добавить html-тег в атрибут popover setAttribute() в начальной загрузке 5, но они показывают тег в содержимом, а не применяют его в качестве атрибута.

 <button type="button" class="btn btn-secondary mx-2" data-bs-container="body" data-bs-toggle="popover" id="popcart" data-bs-placement="bottom" data-bs-content="cart here">
        Cart(<span id="cart">0</span>)
</button>
 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>

И в javascript

     var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })
  document.getElementById("popcart").setAttribute('data-bs-content', '<h5>Cart for your items in my shopping cart</h5>');

Ответ №1:

Взгляните на все варианты всплывающих окон. https://getbootstrap.com/docs/5.0/components/popovers/#options

По умолчанию для HTML установлено значение false, чтобы предотвратить атаки xss. Вы можете установить это значение в значение true при создании экземпляра всплывающего окна, и ваш код будет работать должным образом.

 var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl, 
    
    // options object as a second param
    {
      html: true
    }

  )
})
document.getElementById("popcart").setAttribute('data-bs-content', '<h5>Cart for your items in my shopping cart</h5>');
Метки: