如何在Bootstrap 5 tooltip中正确渲染HTML内容而非纯文本

问题原因 #

你直接复用了Bootstrap 4的tooltip配置规则，Bootstrap 5对组件的data属性做了不兼容的命名空间调整，原有属性无法被识别，导致HTML内容默认不会被解析渲染。

解决方法 #

1. 修改HTML属性 #

所有Bootstrap 5内置组件的data属性都新增了bs-前缀，你需要修改两个属性：

• 把data-toggle="tooltip"替换为data-bs-toggle="tooltip"
• 把data-html="true"替换为data-bs-html="true"

修改后的代码如下：

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

2. 手动初始化tooltip组件 #

Bootstrap 5不会自动初始化页面中的tooltip，需要额外添加JS初始化逻辑：

// 批量初始化页面中所有tooltip
const tooltipTriggers = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipInstances = [...tooltipTriggers].map(el => new bootstrap.Tooltip(el))

可选配置方式 #

你也可以直接在JS初始化时传入html: true参数，不需要把配置写在HTML属性里：

const btnEl = document.querySelector('.btn-secondary')
const customTooltip = new bootstrap.Tooltip(btnEl, {
  html: true,
  title: '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
})

内容的提问来源于stack exchange，提问作者Itération 122442