以角度将自定义样式应用于 ngbtooltip答案

【问题标题】：Apply custom styles to ngbtooltip in angular以角度将自定义样式应用于 ngbtooltip
【发布时间】：2022-01-03 18:11:12
【问题描述】：

我想将自定义样式应用到我的tooltip，如图所示。

请帮帮我..
谢谢

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
@Paulie_D 我已经搜索过这个并尝试了很多方法，但我没有得到输出，这就是我问这个问题的原因。如果你真的知道答案，请告诉我。谢谢

标签： css styles tooltip twitter-bootstrap-tooltip

【解决方案1】：

您可以使用属性tooltipClass 和新类的样式来更改样式。

<button type="button" ngbTooltip="Upload new document" tooltipClass="my-custom-class">
  <img src="plus_button.jpg">
</button>

.my-custom-class .tooltip-inner {
   background-color: lightblue;
}

.my-custom-class .arrow::before {
   border-top-color: lightblue;
}

【讨论】：

【解决方案2】：

终于，我得到了答案。这是获得欲望输出的答案

<a class="btn mr-5" ngbTooltip="Upload new documents" tooltipClass="custom-tooltip" placement="bottom">
   <img src="/assets/images/instantiate-worklist-btn.png" />
</a>

.custom-tooltip .tooltip-inner {
  background: #59ADFF !important;
  padding: 10px;
  font-size: 14px !important;
  position: absolute;
  right: 5px;
  width: 300px;
}

.custom-tooltip .arrow::before {
  border-bottom-color: #59ADFF !important;
}

【讨论】：