How do I add body text to a Bootstrap tooltip?

Question

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 by passing it into the template variablea along with the rest of 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?

Answer 1

I changed the JS to specify the template and title separately and it shows the tooltip. The title is specified in the JS, so I removed it from the HTML and moved it to the JS.

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="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">',
      title:'<h6>Secure Payment</h6>All payment data is handled using secure, industry-standard 256-bit encryption.</div></div>',
    });
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

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