whitelist table inside popover

Question

I have the following popover for a Rails application:

= link_to(organization_path(@organization), "data-toggle": "popover", "data-content-container": "#organization-information", class: "info-icon")

in order to activate it, I have this function

$("[data-toggle=popover][data-content-container]").popover({
    html: true,
    content: function() {
        var attr = $($(this).attr("data-content-container")).html();
        return attr
    },
    trigger: "hover",
    placement: "auto",
    viewport: {
        selector: "body",
        padding: 40
    },
    animation: false,
});

it was working fine on Bootstrap 3.3, now we upgraded to 3.4 and this stopped working. reading the docs, I realized that now there is a whiteList option as well with some default values. I think that this default list is not enough for us since we are trying to render a div with a table inside the popover:

<div id="organization-info">
    <table class="table">
        <thead>
            <tr>
                <th colspan="2">
                    <h3>Org. Name</h3>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Credit Limit</th>
                <td>3,000.00 zł</td>
            </tr>
            <tr>
                <th>Outstanding</th>
                <td>0.00 zł</td>
            </tr>
            <tr>
                <th>Available</th>
                <td>3,000.00 zł</td>
            </tr>
            <tr>
                <th>Total Paid Out</th>
                <td>0.00 zł</td>
            </tr>
            <tr>
                <th>Total Paid Back</th>
                <td>0.00 zł</td>
            </tr>
            <tr>
                <th>Non-performing Amount</th>
                <td>0.00 zł</td>
            </tr>
            <tr>
                <th>Total Amount of Overdue Fees</th>
                <td>0.00 zł</td>
            </tr>
        </tbody>
    </table>
</div>

I tried to add more things to the default whitelist

var internalWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList
internalWhiteList.div = ['*']

and pass it to the function with whiteList: internalWhiteList but nothing changed. How can I properly implement this whitelist?

Answer 1

You would need to whitelist all the table elements like so

$.fn.popover.Constructor.Default.whiteList.table = [];
$.fn.popover.Constructor.Default.whiteList.tr = [];
$.fn.popover.Constructor.Default.whiteList.td = [];
$.fn.popover.Constructor.Default.whiteList.tbody = [];
$.fn.popover.Constructor.Default.whiteList.thead = []

Answer 2

People using Bootstrap 5 should use the following code:

bootstrap.Tooltip.Default.allowList.table = [];
bootstrap.Tooltip.Default.allowList.thead = [];
bootstrap.Tooltip.Default.allowList.tbody = [];
bootstrap.Tooltip.Default.allowList.tr = [];
bootstrap.Tooltip.Default.allowList.td = [];