25

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

6 Answers 6

46

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();
    }
  });
});
10
  • 2
    But why doesn't it sanitize other HTML tags like <div>? What's so special about <table>? I didn't have to whitelist <div> for it to show that HTML -- in fact I mimicked the table with a DIV-table successfully..
    – gene b.
    Mar 27, 2019 at 16:23
  • 13
    This should definitely be documented somewhere more prominently. Just costed me half an hour.
    – berliner
    Mar 28, 2019 at 18:52
  • 3
    Yeah, cost me an hour too. This should be the correct answer. thank you. May 2, 2019 at 10:43
  • 1
    Missing th in the answer, otherwise perfect!
    – caram
    Nov 14, 2019 at 16:59
  • 1
    I modified Biri's answer and added <TH> to his answer. Hopefully it looks complete now. Biri, I hope you don't mind!
    – gene b.
    Nov 18, 2019 at 18:20
22

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.     |
+----------+---------+---------+----------------------------------------+
1
  • Interestingly, even setting sanitize to false it wasn't displaying the table. Using bootstrap 4.5.3. Whitelisting the table html tags did the trick Jan 17, 2021 at 14:41
2

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>

1

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

5
  • I can, but why doesn't my code work? It works for everything other than Tables. It also works in earlier versions of Bootstrap.
    – gene b.
    Mar 26, 2019 at 17:41
  • One other thing, why is the formatting of the table off? By default, everything should be aligned into rows.
    – gene b.
    Mar 26, 2019 at 17:42
  • 1
    @geneb. I have updated the answer to match what you have wanted. Please review.
    – chennighan
    Mar 26, 2019 at 18:16
  • 3
    Unfortunately I'm running the same code and it's not working. You linked a JSFiddle with Bootstrap v3.2.0 if you look at the CDN reerence. But mine is 4.3.2. I claim that with 4.3.2 the updated code above is not working.
    – gene b.
    Mar 26, 2019 at 18:52
  • This does not work for me either with Bootstrap 4.3.1.
    – caram
    Nov 14, 2019 at 16:46
1
<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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.