Angular 5中ng-bootstrap Tooltip箭头缺失问题求助

我明白你在Angular 5项目里用ng-bootstrap的Tooltip组件时，遇到了箭头不显示的问题，这确实挺影响体验的，我来帮你梳理下最常见的排查方向和解决办法：

1. 确认Bootstrap样式是否正确引入 #

ng-bootstrap的Tooltip组件依赖Bootstrap的基础样式（尤其是箭头的border样式定义），哪怕你用的是Angular封装的组件，也得确保Bootstrap CSS已经加载到项目里：

• 如果是通过npm安装的Bootstrap，直接在angular.json的styles数组里添加路径：

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    // 你的其他自定义样式文件
  ]
  

• 也可以在项目根目录的index.html里直接引入CDN资源：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
  

  注意：Angular 5对应的ng-bootstrap版本适配Bootstrap 4，别引入了Bootstrap 5的样式，版本不兼容也会出问题。

2. 检查ng-bootstrap与Angular的版本匹配度 #

ng-bootstrap的版本和Angular版本是严格对应的，Angular 5必须搭配ng-bootstrap 1.x系列的版本，如果版本错了，很可能出现样式或功能异常：

• 打开项目的package.json，查看@ng-bootstrap/ng-bootstrap的版本号，确保是^1.x.x（比如1.1.2）
• 如果版本不对，先卸载现有版本，再安装对应版本：

  npm uninstall @ng-bootstrap/ng-bootstrap
  npm install @ng-bootstrap/ng-bootstrap@1.1.2 --save
  

3. 排查自定义样式的冲突 #

有时候项目里的自定义CSS会不小心覆盖Tooltip的箭头样式，比如设置了display: none或者修改了.tooltip-arrow的border属性：

• 打开浏览器开发者工具，找到Tooltip弹出后的DOM元素，定位到.tooltip-arrow类，查看它的样式是否被正确应用，有没有被其他自定义样式覆盖。
• 如果发现冲突，可以调整自定义样式的优先级，或者修改对应规则避免影响Tooltip。

另外，你贴的按钮代码是没问题的：

Tooltip on right
placement="right"的设置是正确的，只要前面的问题解决，箭头应该就能正常显示啦。

内容的提问来源于stack exchange，提问作者Siva Kaliyamoorthy