Изменить цвет фона всплывающей подсказки в Angular

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

Требуется пара css изменений,

Проверьте демонстрацию stackblitz Здесь

Вам необходимо добавить ниже css к стилю root файл. Замените красный на желаемый цвет.

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

Answer 2

В вашем HTML добавьте tool-tip-btn к атрибуту button class, сделав его так:

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

Затем в вашем CSS, обратитесь к этому классу :

.tool-tip-btn {
  background-color: #ccc;
}

Answer 3

Его определяют в ОФИЦИАЛЬНОМ ДО C Здесь

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

и ссылка для получения дополнительной информации

Answer 4

Вы можете написать класс (ex tool-info-class) и добавить в свою подсказку

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

tooltipClass="tool-info-class"

Пример https://stackblitz.com/edit/angular-yo7esv