How do I add body text to a Bootstrap tooltip? – Blancer.com Tutorials and projects

I’m trying to add some body text to a Bootstrap tooltip, which by default only contains a barebones title. From the relevant Bootstrap 5 documentation it looks like the easiest way to do this is to use the template option:

template

Base HTML to use when creating the tooltip. 

The tooltip's title will be injected into the .tooltip-inner. 

.tooltip-arrow will become the tooltip's arrow. 

The outermost wrapper element should have the .tooltip class and role="tooltip".

However, trying to insert the body text that I want into tooltip-inner tooltip div by passing the template variable to the JavaScript that initialises the tooltip doesn’t make any difference. All that shows is the content of bs-data-title, and without that no tooltip renders at all (as the documentation makes clear).

My markup:

<div class="text-center mt-3 mb-4 mb-lg-0"><span href="#" class="badge security-tooltip" 
data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" 
data-bs-offset="0,12" title="<h6>Secure Payment</h6>">
<i class="fas fa-lock"></i>SECURE PAYMENT</></span>
</div>

The JavaScript I’m using to initialise the tooltip:

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl, {
        template:
            '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' +
            "All payment data is handled using secure, industry-standard 256-bit encryption." +
            "</div></div>",
    });
});

What am I doing wrong and how exactly do I accomplish this?