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

Question

我正在嘗試將一些正文文本添加到 Bootstrap 工具提示，默認情況下僅包含准系統標題。 從相關的Bootstrap 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 來嘗試將我想要的正文文本插入工具提示內部工具提示 div 並沒有任何區別。 所顯示的只是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中去掉了。

（我將顏色更改為紅色，以便您可以看到此片段的文本）。

 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:'All payment data is handled using secure, industry-standard 256-bit encryption.', }); });

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

這是你想做的嗎？