Почему я не могу изменить цвет фона всплывающей подсказки?

Question

Я пытаюсь изменить цвет фона всплывающей подсказки. Я попытался следовать CSS для этого.

<i *ngIf="col.field != 'isActive' && col.field != 'action'" class="fa fa-info-circle" aria-hidden="true" pTooltip="{{col.title}}" tooltipPosition="top" style="font-size:12px;">
</i>

CSS:

.ui-tooltip-text.ui-shadow.ui-corner-all {
    background-color: red;
}

Но цвет фона не изменился. У кого-нибудь есть опыт с этим?

Answer 1

Я решил эту проблему с помощью следующего css.

.ui-tooltip .ui-tooltip-text { background-color: #1f4567 !important; }

Но главная проблема не в css, когда я попробовал в файле Global css, это работает.

Answer 2

Вариант 1

Если вы напишите свой CSS внутри компонента CSS файл, он не будет применяться к вашей подсказке. Поскольку всплывающая подсказка добавляется в путь к корню тела, вам необходимо добавить ViewEncapsulation в ваш компонент. Пожалуйста, просмотрите приведенный ниже фрагмент кода.

Рабочий пример

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent  {
}

Вариант 2

Запишите свой CSS в Global CSS-файл, который находился в вашем проекте src> assets> css .