升级Font Awesome和ng-bootstrap后，Font Awesome图标Tooltip失效如何解决？

安全阿岳

2026-8-20

排查Font Awesome + ng-bootstrap升级后Tooltip失效问题

检查版本兼容性：确认ng-bootstrap、Angular、Font Awesome三者版本匹配。比如ng-bootstrap 16.x对应Angular 16+，Font Awesome 6.x的类名规则有调整（免费图标需加上fa-solid前缀，比如fa-solid fa-info-circle，旧的fa fa-info-circle在FA6里可能无法正确加载图标，导致Tooltip绑定的元素状态异常）。
验证模块导入：升级后务必确保在使用Tooltip的组件所属模块中，重新导入NgbTooltipModule，避免因版本更新导致的模块导出结构变化。
确认元素可交互性：<i>标签属于非交互元素，部分浏览器升级后对这类元素的Tooltip触发逻辑有调整。可以给元素添加tabindex="0"让它可聚焦，或者换成<button>标签包裹图标：
```
<button class="fa fa-info-circle px-1 border-0 bg-transparent" aria-hidden="true" [ngbTooltip]="'Tooltip which shows on top'"></button>
```
查看控制台错误：打开浏览器开发者工具的Console面板，检查是否有模块未找到、指令未识别、Font Awesome资源加载失败等报错，这些信息能直接定位问题根源。
测试最简场景：新建一个空白组件，只保留图标和Tooltip代码，排除项目中其他样式、指令的干扰。如果最简场景能正常运行，说明原有项目存在代码冲突（比如自定义样式覆盖了ng-bootstrap的Tooltip样式，或其他指令影响了Tooltip的初始化）。