bootstrap 5 popover with html content

Question

I am trying to get separate the bootstrap5 popover content from the HTML attributes like you can do with other components, but I can't get it to work.

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




Click to toggle popover

   popover

user_13485757 · Answer

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

user_272478 · Answer

Nobody answered properly with simple JavaScript without jQuery dependency. It's important because Bootstrap 5 doesn't depend on jQuery anymore.

HTML:


  Open Popover



  Popover content with HTML.

JavaScript:

const list = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
list.map((el) => {
  let opts = {
    animation: false,
  }
  if (el.hasAttribute('data-bs-content-id')) {
    opts.content = document.getElementById(el.getAttribute('data-bs-content-id')).innerHTML;
    opts.html = true;
  }
  new bootstrap.Popover(el, opts);
})

user_1056460 · Answer

None of the answers really offered me a complete solution where the popover does not appear until the data-bs-trigger event happen so this is my solution:

Element that when hovering on will have popover:


element to trigger popover

Element that its inner html will be in the popover that appears.


    
      This is the

javascript:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    const popoverId = popoverTriggerEl.attributes['data-content-id'];
    if (popoverId) {
        const contentEl=$(`#${popoverId.value}`).html();
        return new bootstrap.Popover(popoverTriggerEl, {
            content: contentEl,
            html: true,
        });
    }else{//do something else cause data-content-id isn't there.
    }
}

user_14887222 · Answer

There is a simple way to put an html element in popover container

you must put the html element directly in data-bs-content tag, and set the data-bs-html="true" to parse that content as html and also disable the sanitize to make the content readable as html

this code works for me try it too.

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




Click to toggle popover

user_5458836 · Answer

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
var popover = new bootstrap.Popover(document.querySelector('.element'), {
        trigger: 'hover',
        html: true,
        content:function () {
            return 'Test';
        },
})

user_4533280 · Answer

Bootstrap v5.2.0 and laravel 8 in app.js

document.addEventListener('DOMContentLoaded', function() {
 var element = document.getElementById('myPopover');
 if (element) {
     var popover = new bootstrap.Popover(element, {
         container: 'body',
         html: true,
         content: function() {
             return document.getElementById('popover-content').innerHTML;
         },
     });
 }
});

Laravel blade

user_6209197 · Answer

Although the above answers looks fine but there is small correction here. Content option in bootstrap 5 is not working with innerHTML as it expects the type element/string/function to get the content from.

So as usual, first we will need to create div for the content with some id and then wrap it inside hidden div as this will be also shown in main flow. And then with html and content options provided by bootstrap popover, we will insert the custom popover content.

Also, instead of innerHTML, we will directly have document.getElementById('mypopover-content') as the popover content element to show as the content (and not document.getElementById('mypopover-content').innerHTML).

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body',
  html: true,
  content: document.getElementById('mypopover-content'),
})

body {
margin: 10px !important;
}






Trigger popover with other html content


  
    This is the custom popover html content that should be inserted into my example popover

user_14000587 · Answer

$(function() {
var options = {
    html: true,
    title: "Optional: HELLO(Will overide the default-the inline title)",
    //html element
    content: $("#popover-content")
    //Doing below won't work. Shows title only
    //content: $("#popover-content").html()

  }
  var exampleEl = document.getElementById('example')
  var popover = new bootstrap.Popover(exampleEl, options)
})









  
    
    
      
    
  
  
  
  


Html inside popover

user_15116832 · Answer

var hideDiv = document.getElementsByClassName('hide')[0].style.visibility = 'hidden'
var popoverBtn = document.getElementById('btn-action')
var popover = new bootstrap.Popover(popoverBtn, {
    placement: 'bottom',
    html: true,
    content: function() {
        return document.getElementById('id-content-div');
    }

})
   var showDiv = document.getElementsByClassName('hide')[0].style.visibility = 'visible'




Click to toggle popover

   popover 
  Hello popover world

user_171456 · Answer

You can't have a zero length title and content. From the Bootstrap docs...

"Zero-length title and content values will never show a popover."

Click to toggle popover

Demo

bootstrap 5 popover with html content

10 Answers