tooltip('hide')后立即tooltip('show')不生效,因bootstrap异步渲染需监听hidden.bs.tooltip事件;动态改content须dispose再re-init;html内容需显式设html:true;动态元素需手动初始化。
tooltip('hide') 后再 tooltip('show') 不生效?
常见现象是调用 tooltip('hide') 立即跟 tooltip('show'),结果提示框没出来。这是因为 bootstrap 4/5 的 tooltip 是异步渲染的,隐藏动作还没完全结束,显示逻辑就被跳过。
正确做法是等隐藏完成后再触发显示,用 hidden.bs.tooltip 事件监听:
$('#myBtn').tooltip('hide');
$('#myBtn').on('hidden.bs.tooltip', function () {
$(this).tooltip('show');
});
- 别在
tooltip('hide')后直接链式调用tooltip('show') - 如果只是想更新内容并重显,优先走「销毁 + 重建」流程(见下一条)
- Bootstrap 5 中
hidden.bs.tooltip事件名没变,但 DOM 元素必须已初始化过 tooltip 实例
动态改 content 需要重新 init?
Bootstrap Tooltip 的 content 选项只在初始化时读取一次,后续改 data-bs-title 或 JS 对象里的 title 字段,不会自动同步到已激活的 tooltip 中。
最稳妥的做法是先销毁再重建:
const $el = $('#myBtn');
$el.tooltip('dispose'); // Bootstrap 5;Bootstrap 4 用 'destroy'
$el.tooltip({ title: '新内容' });
- Bootstrap 4 用
tooltip('destroy'),Bootstrap 5 改成tooltip('dispose'),混用会报错Method "destroy" is not supported - 如果频繁切换内容,建议封装一个
updateTooltip($el, text)函数,内部统一 dispose + re-init - 别试图用
$el.data('bs.tooltip')._config.title = 'xxx'强行改,私有字段不稳定,且不触发 UI 更新
JS 设置 tooltip 内容时,HTML 被转义怎么办?
默认情况下,Bootstrap 5 把 tooltip 内容当纯文本处理,<strong>加粗</strong> 会原样显示,而不是渲染为加粗文字。
启用 HTML 渲染需显式设置 html: true,且确保内容可信(防 XSS):
$('#myBtn').tooltip({
title: '<strong>重要提示</strong>请确认',
html: true,
trigger: 'hover focus'
});
-
html: true必须和title一起传入,单独改data-bs-html="true"属性无效 - Bootstrap 4 默认允许 HTML,Bootstrap 5 默认关闭,这是关键兼容性差异
- 服务端返回的内容务必过滤或白名单处理,避免执行任意 script
用 data-bs-* 属性初始化后,还能用 JS 动态控制吗?
可以,但要注意初始化时机。如果元素已有 data-bs-toggle="tooltip",Bootstrap 会在 DOMContentLoaded 自动初始化——此时你再用 JS 调 tooltip('show') 是有效的。
但如果 JS 在 DOM 加载前就执行,或元素是后来动态插入的,就得手动触发初始化:
// 动态插入后
const $newBtn = $('<button data-bs-toggle="tooltip" data-bs-title="动态按钮">点我</button>');
$('body').append($newBtn);
$newBtn.tooltip(); // 必须手动 init
- 重复调用
.tooltip()不会报错,但会覆盖之前配置,慎用于已初始化元素 - 用
data-bs-*属性初始化的 tooltip,JS 方法(如show/hide)依然可用,前提是实例存在 - 检查是否初始化成功:打印
$('#x')[0].__bootstrap_tooltip(Bootstrap 5)或$('#x').data('bs.tooltip')(Bootstrap 4)
事情说清了就结束。真正麻烦的是混合使用 data 属性初始化 + JS 动态更新 + HTML 内容,这三者叠加时,版本差异、执行时序、实例生命周期很容易串在一起出问题。











