如何在Bootstrap tooltip的title属性中插入span元素并正常渲染内容

问题原因 #

Bootstrap的Tooltip组件会在初始化时就把title属性的内容读取为内部缓存，只有首次触发tooltip显示时才会把title内的HTML渲染为真实DOM元素，而且这个渲染出的.totalvisitors元素是tooltip的临时子元素，并不常驻页面主DOM树，你在全局用document.querySelector('.totalvisitors')是找不到该元素的，自然无法插入计算好的访客总数。

解决方法 #

推荐直接动态更新tooltip的title属性后刷新实例，操作最简单：

1. 先简化你的表头代码，不需要把span提前写在title里：

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

2. 你完成访客求和逻辑后，直接更新th的title属性再刷新tooltip实例即可：

// 你的访客求和逻辑，假设最终得到的总和存在total变量中
let total = 0;
document.querySelectorAll('tbody tr td:nth-child(2)').forEach(item => {
  total += parseInt(item.textContent.trim()) || 0;
})

// 获取th元素和对应的tooltip实例
const visitorTh = document.querySelector('th[data-bs-toggle="tooltip"]');
// 更新title内容
visitorTh.setAttribute('title', `Total Visitors: <span class="totalvisitors">${total}</span>`);
// 刷新tooltip内容
const tooltipInstance = bootstrap.Tooltip.getOrCreateInstance(visitorTh);
tooltipInstance.setContent({ '.tooltip-inner': visitorTh.getAttribute('title') });

如果需要每次悬浮都实时更新总和，可以额外监听tooltip的显示事件：

visitorTh.addEventListener('show.bs.tooltip', () => {
  // 这里重新执行求和逻辑更新total即可
  tooltipInstance.setContent({ '.tooltip-inner': `Total Visitors: ${total}` });
})

注意：你代码里已经加的data-bs-html="true"属性是必须的，开启后tooltip才会把title里的内容作为HTML渲染，不会转义成纯文本。

内容的提问来源于stack exchange，提问作者Jack Maessen