How do I get HTML elements with quotation marks into a Bootstrap popover?

Question

My Bootstrap Popover button:

I want to get this HTML into the data-content so it displays when the popover is clicked:


   EDIT

Unfortunately the Quotes in the HTML seem to break it. I have tried using single quotes, double quotes and the escape quote code ".

user_18515495 · Answer

I believe this is what youre looking for:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

It seems its also important for which version of bootstrap you are using. From researching a bit, some of the older bootstrap versions did not require you to put something like 'data-bs-placement' but instead 'data-placement'. Here I am using Bootstrap version 5.0.

Bootstrap 5.0 DOCS also shows you can initialize a popover to appear visible by using (adding to your .js file or adding a tag:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Another thing is that you were right to use single quotes to begin with because double quoting with nested double quotes can cause confusion when executed.

References:

Bootstrap 5.0 Popovers DOCS

Reason for data-bs instead of data-attribute

How do I get HTML elements with quotation marks into a Bootstrap popover?

1 Answers