当页面同时引入 bootstrap css 和自定义 tooltip 样式时，因类名（如 `.tooltip`）被 bootstrap 占用并覆盖，导致自定义悬停提示失效；只需重命名自定义类名即可避免冲突。
在使用 Bootstrap 框架时，其内置的 .tooltip 类是专为 javaScript 初始化的官方 Tooltip 组件预留的——即使你未调用 new bootstrap.Tooltip()，Bootstrap 的 css 文件仍会声明并重置该类的样式（例如 position: absolute、visibility: hidden、opacity: 0 等），从而覆盖你原本通过纯 CSS 实现的 :hover 悬停逻辑。
你遇到的现象——“只有删除 引入 Bootstrap 后，自定义 tooltip 才显示”——正是这一冲突的典型表现：Bootstrap 的 CSS 规则优先级更高，且其 .tooltip 定义中可能包含 pointer-events: none 或 display: none 等隐藏行为，直接破坏了你的 :hover .tooltiptext 显示机制。
✅ 正确解决方案：避免使用 Bootstrap 预留的关键类名
将自定义 tooltip 的外层容器类从 .tooltip 改为其他唯一名称（如 .tooltipp、.custom-tooltip 或 .hover-tip），确保不与任何框架保留类冲突：
/* ✅ 安全命名：避开 Bootstrap 内置类 */ .custom-tooltip { position: relative; display: inline-block; border-bottom: 1px dotted #333; cursor: help; } .custom-tooltip .tooltip-text { visibility: hidden; width: 120px; background-color: #000; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; /* 在元素上方显示 */ left: 50%; margin-left: -60px; /* 水平居中 */ opacity: 0; transition: opacity 0.3s, visibility 0.3s; } .custom-tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }对应 html 中也同步更新类名：
Hover over me Tooltip text ⚠️ 注意事项：
- 不要仅靠 !important 强行覆盖 Bootstrap 样式——这会增加维护成本且不可靠；
- 若需同时使用 Bootstrap 官方 Tooltip（依赖 js 初始化），请务必为其保留 .tooltip 类，并为自定义纯 CSS 提示使用完全独立的命名空间；
- 建议在项目初期就建立类名规范（如前缀 u- 表示 utility、c- 表示 component），从根本上规避此类冲突。
通过语义清晰、无框架侵入的类名重构，你既能自由实现轻量级 CSS Tooltip，又能无缝集成 Bootstrap 的按钮、栅格等组件——二者各司其职，互不干扰。