如何将正文文本添加到 Bootstrap 工具提示？

Question

我正在尝试将一些正文文本添加到 Bootstrap 工具提示，默认情况下仅包含准系统标题。从相关的Bootstrap 5 documentation 看来，最简单的方法是使用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". 

但是，尝试通过将我想要的正文文本与初始化工具提示的其余 JavaScript 一起传递到 template 变量中来插入它并没有任何区别。所显示的只是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>