在 angular 中将自定义样式应用于 ngbtooltip

Question

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

请帮帮我..
谢谢

Answer 1

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

<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;
}

Answer 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;
}