Question

我有一个工具提示，我想更改他的背景。默认背景为黑色。

 <ng-template #start>Start</ng-template>
 <button [ngbTooltip]="start"  type="button" class="btn btn-outline-danger">
     <i class="fa fa-play" aria-hidden="true"></i>
 </button>

您能帮我吗？

Answer 1

您可以编写一个类（例如，tool-info-class）并在工具提示上添加

.tool-info-class .tooltip-inner {
  background-color: #fff;
}

tooltipClass="tool-info-class"

示例https://stackblitz.com/edit/angular-yo7esv

Answer 2

在HTML中，将tool-tip-btn添加到button的{{1}}属性中，如下所示：

class

然后在您的CSS中，引用该类：

class="btn btn-outline-danger tool-tip-btn"

Answer 3

它在其官方文档Here

中定义

<button type="button" class="btn btn-outline-secondary" ngbTooltip="Nice class!"
  tooltipClass="my-custom-class">
  Tooltip with custom class
</button>

以及您的TS

styles: [`
    .my-custom-class .tooltip-inner {
      background-color: darkgreen;
      font-size: 125%;
    }
    .my-custom-class .arrow::before {
      border-top-color: darkgreen;
    }
  `]

和link以获得更多信息

Answer 4

需要进行一些CSS更改，

查看stackblitz演示Here

您需要在CSS下面添加到根样式文件。用所需的颜色替换红色。

/* Add application styles & imports to this file! */

.tooltip-inner{
  background-color: red!important;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before{
  border-right-color:red!important;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before{
  border-left-color:red!important;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before{
  border-top-color:red!important;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before{
  border-bottom-color:red!important;
}

在Angular中更改工具提示背景颜色

4 个答案: