I am attempting to enhance a Bootstrap tooltip by adding body text, as it typically only includes a basic title. After reviewing the Bootstrap 5 documentation, it seems that the simplest approach is to utilize the template option:
template
Base HTML used for creating the tooltip.
The tooltip's title will be placed into the .tooltip-inner.
.tooltip-arrow will serve as the arrow for the tooltip.
The outermost wrapping element should have the .tooltip class and role="tooltip".
Despite my efforts to insert the desired body text by passing it through the template variable alongside the remainder of the JavaScript that initializes the tooltip, no changes are observed. Only the content of bs-data-title displays, and without it, no tooltip is rendered (as indicated in the documentation).
My coding setup:
<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 utilizing to set up 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 missing here and how can I properly achieve this?