Bootstrap 中禁用按钮默认无法触发 tooltip，因其 pointer-events: none 阻断事件；正确做法是将 tooltip 绑定到包裹容器，并调整 CSS 与 data 属性以适配 Bootstrap 5+。
bootstrap 中禁用按钮默认无法触发 tooltip，因其 `pointer-events: none` 阻断事件；正确做法是将 tooltip 绑定到包裹容器，并调整 css 与 data 属性以适配 bootstrap 5+。
在 Bootstrap（尤其是 v5.x 及以上版本）中，原生 <button disabled></button> 元素会阻止所有鼠标交互事件（包括 mouseenter），导致 data-bs-toggle="tooltip" 无法激活。直接对禁用按钮设置 pointer-events: auto 虽可恢复事件捕获，但会破坏禁用语义（用户可能误点），且违反可访问性规范（ARIA 不推荐）。因此，最佳实践是使用父容器承载 tooltip，同时保持按钮语义化禁用状态。
✅ 正确实现步骤
1. HTML 结构：添加语义化包裹容器
<div id="get-results-btn-wrapper" class="d-inline-block">
<button id="get-results-btn" class="btn standard-btn-style">
Get Results
</button>
</div>✨ 关键点：
d-inline-block确保 wrapper 尺寸贴合按钮，避免 tooltip 定位偏移；id命名清晰便于 JS 控制。
2. JavaScript 初始化（Bootstrap 5+）
// 禁用按钮（保持语义正确性）
$("#get-results-btn").prop("disabled", true);
// 将 tooltip 绑定到 wrapper 容器（非按钮本身）
$("#get-results-btn-wrapper")
.attr("data-bs-toggle", "tooltip")
.attr("title", "You may only submit this form once")
.tooltip(); // 显式初始化（必需！）⚠️ 注意：Bootstrap 5+ 使用
data-bs-toggle（非旧版data-toggle）；且必须调用.tooltip()方法显式启用，否则属性无效。
3. 必要 CSS 修复
/* 确保 wrapper 可响应 hover 事件 */
#get-results-btn-wrapper {
cursor: help; /* 视觉提示：此处有提示 */
}
/* 保持按钮禁用态视觉一致性 */
#get-results-btn:disabled {
opacity: 0.6;
filter: grayscale(20%);
}
/* （可选）修复 tooltip 在 inline-block 容器中的垂直对齐 */
#get-results-btn-wrapper .tooltip-inner {
max-width: 240px;
text-align: center;
}❌ 常见错误与规避
-
错误绑定目标：对
#get-results-btn直接设data-bs-toggle→ 失效（事件被拦截） -
遗漏初始化：仅写 HTML 属性不调用
.tooltip()→ tooltip 不渲染 -
CSS 冲突：
.btn[disabled] { pointer-events: none }应作用于按钮，而非 wrapper —— 但此规则由 Bootstrap 默认提供，无需手动添加；强行覆盖反而破坏禁用逻辑 -
CDN 版本混用：确保引入
bootstrap.bundle.min.js（含 Popper）而非单独bootstrap.min.js，否则 tooltip 依赖缺失
✅ 最终验证要点
- 按钮不可点击、无焦点、屏幕阅读器读作 “button, disabled”
- 鼠标悬停 wrapper 区域时 tooltip 正常显示（位置建议设为
placement: 'top'） - 移动端可通过
touchstart+setTimeout模拟长按触发（如需支持，可扩展）
通过容器代理 + 语义化禁用 + 显式初始化三者结合，即可安全、合规、稳定地为禁用按钮赋予上下文提示能力。
