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