ngbTooltip组件CSS样式未生效问题求助

1. 确认引入Bootstrap核心样式 #

ng-bootstrap本身不包含Bootstrap的CSS代码，它仅实现组件逻辑，必须单独引入Bootstrap样式才能让tooltip正常显示预设样式：

• 若通过npm安装了bootstrap，在angular.json的styles数组中添加：

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ]
  

• 也可在src/index.html中引入CDN链接：

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

  注意：ng-bootstrap 13.x版本对应Bootstrap 5.x，需保证版本匹配。

2. 修复模板语法错误 #

你的代码中<ng-template #passTooltip>的闭合标签书写错误，会导致DOM结构异常影响样式渲染，修正后代码：

<input type="password" [ngbTooltip]="passTooltip" placement="end"/>

<ng-template #passTooltip>
  <div>Password Tooltip</div>
</ng-template>

3. 自定义样式的穿透处理 #

若自定义tooltip样式不生效，是因为tooltip组件挂载在<body>下，脱离了组件的样式隔离范围，可通过两种方式处理：

• 组件内使用::ng-deep穿透样式隔离：

  ::ng-deep .tooltip {
    background-color: #2c3e50;
    color: #fff;
  }
  ::ng-deep .tooltip-arrow {
    border-right-color: #2c3e50;
  }
  

• 直接在全局样式文件（如styles.scss）中编写样式，无需::ng-deep：

  .tooltip {
    background-color: #2c3e50;
    color: #fff;
  }
  .tooltip-arrow {
    border-right-color: #2c3e50;
  }
  

4. 验证依赖版本匹配 #

ng-bootstrap 13.1.1要求Angular版本为14.x左右，同时Bootstrap版本需为5.x，版本不匹配会引发样式异常，可检查package.json中的依赖：

"bootstrap": "^5.2.3",
"@ng-bootstrap/ng-bootstrap": "^13.1.1",
"@angular/core": "^14.2.0"

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