如何在引导工具提示中添加正文文本？

Question

我正在尝试将一些正文文本添加到引导工具提示中，默认情况下，这个提示只包含一个简单的标题。从相关的引导5文档看来，最简单的方法是使用template选项：

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". 

但是，尝试将我想要的正文文本与初始化工具提示的其他template变量一起传递到JavaScript变量a中并没有任何区别。所有显示的都是bs-data-title的内容，如果没有这个内容，就根本没有工具提示呈现(正如文档所表明的)。

我的标记：

<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>

用于初始化工具提示的JavaScript：

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>',
    });
});

我做错了什么?我到底是怎么做到的？

Answer 1

我更改了JS，分别指定了模板和标题，它显示了工具提示。标题是在JS中指定的，所以我将它从HTML中删除并移到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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>

​