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

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

Option 1

如果你在组件 CSS 文件中编写你的 CSS 它不会应用到你的工具提示上。因为 tooltip 添加在主体根路径中，所以您必须在组件中添加 ViewEncapsulation。请查看以下代码段。

Working Example

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

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

Option 2

在 Global css 文件中写入您的 css，该文件位于您的元素 src > assets > css 中。