Putting table into Bootstrap popover

Question

I have a Bootstrap popover and I'm trying to put a table into it but then it doesn't show up when I click on it. This is the first time attempting HTML inside a popover so I'm unsure how to go about doing it correctly. Thanks!

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

 <a role="button" class="btn btn-link btn-item black-text" data-toggle="popover" data-trigger="focus" data-placement="top" title="Currency Converter" data-content="Displayed rates are only for informational purposes and do not reflect on the actual rates you may be charged by the financial institution handling your transaction.
<table class='table table-condensed table-bordered'>
<tr><td>Euro</td><td>€79,123</td></tr>
<tr><td>GB Pound</td><td>£46,536</td></tr>
<tr><td>AU $</td><td>$123,456</td></tr>
</table>LLC accepts payment in US Dollars only. Rates do not include taxes, duties, shipping, insurance, or any other expenses associated with the purchase."><i class="fa fa-exchange"></i> Currency converter</a>

Sundsvall

I am not sure whether thats the main cause or not but you are missing a quotation mark - " - on your button. At the very end where it says handling your transaction. – Precocity

I feel like you are trying to embed HTML tags inside of HTML tags, which seems like very bad practice at the very least. – Florencia

@user2190986 t here is no quotation mark there because the content still continues. – Sundsvall

@Florencia how do I make such a popover with HTML? I need that table in there. A modal takes up whole screen. – Sundsvall

Answer 1

This may help:

HTML:

<div id="myPopoverContent">
<table border="1" style="width:100%">
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
</table>

jQuery:

$('[data-toggle=popover]').popover({

   content: $('#myPopoverContent').html(),
   html: true

}).click(function() {
   $(this).popover('show');
});

Working jsFiddle: http://jsfiddle.net/ja3f6p4j/19/

Precocity

Yes, I ended up using something like this and it worked. – Sundsvall

How would you handle it if you were creating a dynamic table? – Ownership

Solution if working with old Bootstrap 2.1, but not working with new version 4.6 – Nightwear

Answer 2

This worked for me:

$(function() {
    $.fn.popover.Constructor.Default.whiteList.table = [];
    $.fn.popover.Constructor.Default.whiteList.tr = [];
    $.fn.popover.Constructor.Default.whiteList.td = [];
    $.fn.popover.Constructor.Default.whiteList.div = [];
    $.fn.popover.Constructor.Default.whiteList.tbody = [];
    $.fn.popover.Constructor.Default.whiteList.thead = [];

    $('[data-toggle="popover"]').popover({
        html: true,
        container: 'body'
    })
})

Hummingbird

Working solution... Could you please explain what is the line $.fn.popover.Constructor.Default.whiteList.xxxxxx means? – Escadrille

People using Bootstrap 5 should replace $.fn.popover.Constructor.Default.whiteList. [...] with bootstrap.Tooltip.Default.allowList. [...] for every allowed HTML tag. – Bithia

BootStrap 5 - more information on allowList getbootstrap.com/docs/5.0/getting-started/javascript/#sanitizer – Selfsown

Answer 3

Example : http://jsfiddle.net/z824fn6b/320/ use table in popover and toggle button

<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="right">Popover Example</a>
<div id="a1" class="hidden">
  <div class="popover-heading">Title <span style="float:right;cursor:pointer;" class="fa fa-times" data-toggle="popover"></span></div>
  <div class="popover-body">
    <table style="width:100%">
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>
  </div>
</div>


$(function() {
  $("[data-toggle=popover]").popover({
    html: true,
    content: function() {
      var content = $(this).attr("data-popover-content");
      return $(content).children(".popover-body").html();
    },
    title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
    }
  });
});

Parietal

Answer 4

Here is how I did it:

HTML:

<div class="span12" style="margin-top: 150px;width:100%">
   <a tabindex="0" role="button" data-trigger="focus" class="btn-sm btn-info" data-placement="top" id="commentPopover"><i class="fa fa-comments" ></i> View</a>
   <!-- Popover 2 hidden content -->
   <div id="commentPopoverHiddenContent" style="display: none">
      <div>
         <table border="1" style="width:100%">
            <tr>
               <th width="30%">Comment date</th>
               <th width="70%">Comment</th>
            </tr>
            <tr>
               <td>12/03/2015 16:45</td>
               <td>*Username - Testing1</td>
            </tr>
            <tr>
               <td>12/03/2015 16:55</td>
               <td>*Username - Testing2</td>
            </tr>
            <tr>
               <td>12/03/2015 17:13</td>
               <td>*Username - Testing3</td>
            </tr>
         </table>
      </div>
   </div>
   <!-- Popover 2 hidden title -->
   <div id="commentPopoverHiddenTitle" style="display: none">
      Error comments
   </div>
 </div>

JQuery:

$(function(){
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$("#commentPopover").popover({
    html : true, 
    content: function() {
      return $('#commentPopoverHiddenContent').html();
    },
    title: function() {
      return $('#commentPopoverHiddenTitle').html();
    }
});
});

Here is a fiddle: http://jsfiddle.net/5bsykcqt/

Antibiotic

Answer 5

Using the current Bootstrap v5.3, here's an example using the <table> tag inside a Popovers:

document.addEventListener('DOMContentLoaded', function () {
      const allowList = bootstrap.Tooltip.Default.allowList;
      allowList.table = [];
      allowList.thead = [];
      allowList.tbody = [];
      allowList.tr    = [];
      allowList.th    = [];
      allowList.td    = [];
  });
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popover => {new bootstrap.Popover(popover, {html: true})});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="
<p>And here's some amazing content with<br/>line break.</p>
<ul>
  <li>Unordered Item 1</li>
  <li>Unordered Item 2</li>
</ul>
<table class='table table-sm table-bordered'>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
It's very engaging. Right?
">Click to toggle popover</button>

Streusel

Answer 6

With CSS3 there is a simpler solution: you can use the following display attributes to simulate a table behavior

.popover_container{
    display: table;
}
.popover_row{
    display: table-row;
}
.popover_column1{
    display: table-cell;
    text-align: left;
}
.popover_column2{
    display: table-cell;
    text-align: left;
}

and then build the popover content

$popover_content = "<div class='popover_container'>
                       <div class='popover_row'>
                           <div class='popover_column1'></div>
                           <div class='popover_column2'></div>
                       </div>  
                    </div>";

and use it in your HTML

echo ('<span class="material-symbols-outlined" data-bs-html="true" data-bs-toggle="popover" data-bs-trigger="hover" title="your titile" data-bs-content="'.$popover_content.'">youricon</span>')

Rubstone

Answer 7

As nothing was working well for me and the answers were old, this did the trick:

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;
                  opts.sanitizeFn = function (content) {
                        return content
                    }
                }
                new bootstrap.Popover(el, opts);
              })

As alluded to at the bottom of this page: Bootstrap 5 Documentation You can set your own sanitize function, so if you just return what was provided, nothing is removed. Boom

Demolish