为什么我无法更改工具提示背景颜色？

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文件中尝试过它的工作。