如何在引导工具提示中创建跨度元素

Posted 2023-05-08

【中文标题】如何在引导工具提示中创建跨度元素

【英文标题】：How to create a span element in bootstrap tooltip

【发布时间】：2021-10-20 03:50:19

【问题描述】：

我有一张桌子，里面有很多访客。总结所有访问者，我使用了一些 javascript。 所有访问者的总和应注入<span class="totalvisitors"></span>。 将跨度放在桌子下时，这很好用。但我想在th 内的工具提示标题内创建跨度。问题：它在工具提示中显示<span class="totalvisitors"></span>，但没有访问者数量。

我的工具提示如下所示：

<thead>
    <tr>
      <th>Date</th>
      <th scope="col" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title='Total Visitors:<span class="totalvisitors"></span>'>Visitors</th>
      
    </tr>
</thead>

在这里您可以在FIDDLE 中查看问题（将鼠标悬停在访客上）

【参考方案1】：

您正在使用 bootstrap 4，其中与以前版本的 bootstrap 有不同的属性，它使用 data-bs-html="true" 而在 bootstrap 4 中它使用 data-html="true"

所以你的代码必须是

<thead>
    <tr>
      <th>Date</th>
      <th scope="col" tabindex="0" data-toggle="tooltip" data-placement="top" data-html="true" title='Total Visitors:<span class="totalvisitors"></span>'>Visitors</th>
    </tr> 
</thead>