為什么我無法更改工具提示背景顏色？

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

選項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中 。

Answer 2

我通過使用以下css解決了這個問題。

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

但主要問題不在於css，當我在Global css文件中嘗試過它的工作。