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

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