Putting table into Bootstrap popover
32,839
Solution 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/
Solution 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'
})
})
Solution 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();
}
});
});
Solution 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/
![Rachel S](https://lh4.googleusercontent.com/-FOBHawSPpPg/AAAAAAAAAAI/AAAAAAAAOFQ/QQ07RlDlXCQ/photo.jpg?sz=256)
Author by
Rachel S
I'm a Web designer, photographer, limericist and domestic CEO.
Updated on July 09, 2022Comments
-
Rachel S almost 2 years
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>
-
Skywalker almost 9 yearsI 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.
-
Jason almost 9 yearsI feel like you are trying to embed HTML tags inside of HTML tags, which seems like very bad practice at the very least.
-
Rachel S almost 9 years@user2190986 t here is no quotation mark there because the content still continues.
-
Rachel S almost 9 years@Jason how do I make such a popover with HTML? I need that table in there. A modal takes up whole screen.
-
Skywalker almost 9 years@RachelS see answer please.
-
-
Rachel S almost 9 yearsYes, I ended up using something like this and it worked.
-
John Doe over 8 yearsHow would you handle it if you were creating a dynamic table?
-
shafeeq almost 3 yearsWorking solution... Could you please explain what is the line $.fn.popover.Constructor.Default.whiteList.xxxxxx means?
-
Tomasz Puwalski almost 3 yearsPeople using Bootstrap 5 should replace $.fn.popover.Constructor.Default.whiteList. [...] with bootstrap.Tooltip.Default.allowList. [...] for every allowed HTML tag.
-
Paul Serikov over 2 yearsSolution if working with old Bootstrap 2.1, but not working with new version 4.6
-
endeavour over 2 yearsBootStrap 5 - more information on allowList getbootstrap.com/docs/5.0/getting-started/javascript/#sanitizer