当页面同时引入 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 的按钮、栅格等组件——二者各司其职，互不干扰。
