Bootstrap 4.3.1 Popover Does Not Display Table Inside Popover Content

Question

I have a Bootstrap 4.3.1 Popover with a Table embedded inside the content. Everything is displayed but the table is not. In the below code, I've tried both the function for content as well as directly $('#a02').html().

$("[data-toggle=popover]").popover({
    html: true,    
    content: function() { return $('#a02').html(); },  // Also tried directly without function
    title: 'Test'
  }).click(function() {
	  $(this).popover('show');
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<a href="#" data-toggle="popover" data-trigger="focus" data-placement="right">
   Click Here for Popover
</a>

<div id="a02" style="display: none;">
   Some text before table
   <div>
      <table width="100%">
          <thead>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
              </tr>
          </tbody>
      </table>
   </div>
</div>

Some people have tried showing me a JSFiddle that works with Bootstrap 3. I took their JSFiddle and merely changed the Bootstrap refs to 4, and it broke. Bootstrap 3 JSFiddle | Bootstrap 4 JSFiddle

Answer 1

Bootstrap above 3.4 version has a sanitization of HTML tags and attributes before it will be displayed in the popover or tooltip content. so make sure you add the tags and attributes to the whitelist if it is not present in the default whitelist.

The default whitelist has been listed here: https://getbootstrap.com/docs/3.4/javascript/#js-sanitizer

The new tags to the white list can be added below

// To allow tags to display in pop-over body we need to whitelist the tags which is not present in the default whitelist. // Currently table and it's children is not whitelisted by default // So i am adding table tags along with other required tags

var myDefaultWhiteList = $.fn.popover.Constructor.DEFAULTS.whiteList
myDefaultWhiteList.table = []
myDefaultWhiteList.tbody = []
myDefaultWhiteList.tr = []
myDefaultWhiteList.td = []
myDefaultWhiteList.th = []

// To allow tags attributes we can add like this myDefaultWhiteList.td = ['data-option']

You can also add your tag to display the HTML content in the popover body

Answer 2

<div class=".." data-bs-toggle="popover"  data-bs-trigger="hover"  data-bs-html="true" data-bs-animation="false" data-bs-placement="top" data-bs-content=".." title=".."></div>

Adding data-bs-animation="false" solves my problem.

Answer 3

There's nothing wrong with biri's answer, but just so you know (because it's also badly documented), you can deactivate the entire sanitizer if you want to.

$(function() {
  $("[data-toggle=popover]").popover({
    sanitize: false,
  });
});

UPDATE: What do you know? It's documented by now:

+----------+---------+---------+----------------------------------------+
| Name     | Type    | Default | Description                            |
+----------+---------+---------+----------------------------------------+
| sanitize | boolean | true    | Enable or disable the sanitization. If |
|          |         |         | activated 'template', 'content' and    |
|          |         |         | 'title' options will be sanitized.     |
+----------+---------+---------+----------------------------------------+

Answer 4

Tooltips and Popovers use a built-in sanitizer to sanitize options which accept HTML

https://getbootstrap.com/docs/4.3/getting-started/javascript/#sanitizer

try this:

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

  $("[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();
    }
  });
});

Answer 5

For some how table not working inside popover, but you can use other tags like ul. I just update the with ul i hope it'll help you out. Thanks

$("[data-toggle=popover]").popover({
    html: true,    
    content: function() { return $('#a02').html(); },  // Also tried directly without function
    title: 'Test',
  }).click(function() {
	  $(this).popover('show');
  });

.popover-html ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popover-html ul li {  
    display: inline-block;
    white-space: nowrap;
    width: 33%;
}

.popover-html ul li + li {
  padding-left: 5px;
}  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<a href="#" data-toggle="popover" data-trigger="focus" data-placement="right">
   Click Here for Popover
</a>

<div id="a02" style="display: none;">
   Some text before table <div class='popover-html'><ul><li>Column 1</li><li>Column 2</li><li>Column 3</li></ul><ul><li>1</li><li>2</li><li>3</li></ul></div>

Another option you can add HTML in data-content attribute. Thanks

$("[data-toggle=popover]").popover();

.popover-html ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popover-html ul li {  
    display: inline-block;
    white-space: nowrap;
    width: 33%;
}

.popover-html ul li + li {
  padding-left: 5px;
}  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="Test" 
   data-content="Some text before table<div class='popover-html'><ul><li>Column 1</li><li>Column 2</li><li>Column 3</li></ul><ul><li>1</li><li>2</li><li>3</li></ul></div>">Click Here for Popover</a>

Answer 6

you can do this like so:

$(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();
    }
  });
});

<!-- Popover #1 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="right">Popover Example</a>


<!-- Content for Popover #1 -->
<div id="a1" class="hidden">
  <div class="popover-heading">Title</div>
  <div class="popover-body">
    <table style="width:100%">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </div>
</div>

Link to Popover Bootstrap 4.0 Documentation UPDATE: Updated JSFiddle