Bootstrap 4.3.1 Popover Does Not Display Table Inside Popover Content
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();
}
});
});
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. |
+----------+---------+---------+----------------------------------------+