如何修改ngbTooltip的默认文字颜色与背景颜色？

你使用的ngbTooltip是Angular Bootstrap的提示指令，默认渲染在页面body根节点下，默认样式继承Bootstrap原生tooltip规则，可通过以下两种方式自定义颜色：

单条提示框独立配置（推荐，不影响其他提示框） #

1. 给对应标签添加tooltipClass属性，绑定自定义样式类，修改后的代码如下：

<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modal3" placement="end"
ngbTooltip="Will wait for action on file" tooltipClass="custom-file-tooltip">Wait for a file</a>

2. 在项目全局样式文件（src/styles.css/src/styles.scss，非组件私有样式文件）中添加对应样式规则：

/* 配置提示框主体的背景、文字颜色 */
.custom-file-tooltip .tooltip-inner {
  background-color: #165DFF; /* 替换为你需要的背景色值 */
  color: #ffffff; /* 替换为你需要的文字色值 */
}

/* 配置提示框箭头颜色，和主体背景色保持一致即可 */
.custom-file-tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #165DFF;
}

注意：如果你的提示框方向不是end（右侧），需要对应修改箭头选择器：top方向对应.bs-tooltip-top，修改border-top-color；bottom方向对应.bs-tooltip-bottom，修改border-bottom-color；start（左侧）对应.bs-tooltip-start，修改border-left-color。

全局统一修改所有提示框样式 #

如果项目内所有ngbTooltip都需要统一配色，不需要逐个标签加配置，直接在全局样式文件覆盖默认类即可：

/* 全局提示框主体样式 */
.tooltip .tooltip-inner {
  background-color: #165DFF;
  color: #ffffff;
}

/* 全局所有方向提示框箭头颜色 */
.bs-tooltip-top .tooltip-arrow::before { border-top-color: #165DFF; }
.bs-tooltip-end .tooltip-arrow::before { border-right-color: #165DFF; }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #165DFF; }
.bs-tooltip-start .tooltip-arrow::before { border-left-color: #165DFF; }

注意事项 #

不要直接在组件私有样式文件中写tooltip相关样式，受Angular视图封装规则限制，这类样式不会生效。如果一定要写在组件样式中，需要给选择器加::ng-deep前缀穿透封装，例如：

::ng-deep .custom-file-tooltip .tooltip-inner {
  background-color: #165DFF;
  color: #ffffff;
}

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