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。请查看下面的代码段。

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  {
}

选项2

在位于您的项目 src>资产> css 中的全局 css文件中，将css写入。

Answer 2

我已经通过使用以下CSS解决了这个问题。

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

但是主要问题不是关于CSS，当我在Global CSS文件中尝试过时就可以了。

为什么我不能更改工具提示的背景颜色？

2 个答案: