Why isn't HTML working in Bootstrap v5 Popover?

Question

When I add HTML into my Bootstrap v5 popover, it does not display the HTML in the popover. I believe that I have all of the correct options passed as described in the docs. Almost all of the results which I've gotten from searches to try and understand this issue deal with Bootstrap v4 and v3, so they aren't of use to me.

The popover all of the way on the right should have the switch affordance ("Toggle") appear below "Hello World" in the popover. The HTML code is present.

The code of the above tests centers around these 3 affordances:





Toggle

Have I missed something? Please let me know. Thank you!

user_908086 · Answer

Ok, reading and re-reading the Bootstrap v5 documentation's fine print finally led me to the solution.

Even though data-bs-sanitize="false" is a valid option that can be passed, per the documentation... the documentation also notes elsewhere that:

Note that for security reasons the sanitize, sanitizeFn, and allowList options cannot be supplied using data attributes.

So... in order for the HTML to execute, because data-bs-sanitize="false" is ignored, one has to manually add non-default values to the Sanitizer whitelist which are used with the HTML code inside the popover. In my case, they were as follows:

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

// To allow elements
myDefaultAllowList.input = ['type', 'checked']
myDefaultAllowList.label = ['for']

And now... it's working as intended. A lesson in sanitization.

user_6127393 · Answer

I'm not sure if you initialize the popovers correctly as data-bs-sanitize="false" should allow any html used.
You are adding elements that are not in the bootstrap.Tooltip.Default.allowList object. So to allow the elements and attributes used in your code the following config options will work to render the popover as intended:

$(document).ready(function() {
  const myDefaultAllowList = bootstrap.Tooltip.Default.allowList
  // To allow elements and attributes on elements
  myDefaultAllowList.input = ['type', 'checked']
  myDefaultAllowList.label = ['for']

  $('[data-bs-toggle="popover"]').popover({
    allowList: myDefaultAllowList,
    html: true
  })

  /* or just disable the sanitzer
  $('[data-bs-toggle="popover"]').popover({
    sanitize: false
  })
  */
})






  
    
    
      
        
          
            
              
                Work alone:
                
                
                  
                  

                
                
                  
                  Toggle

                
                
                
                
                
                Fail combined:
                
                
                  
                  ...

Note:

You need to do more work in order to preserve the checked state of the toggle. As it is, the toggle reverts back to the initial state when closed and re-opened. Fixing this would be a different question.

Why isn't HTML working in Bootstrap v5 Popover?

2 Answers

Note: