如何将自定义 CSS 添加到 ngx-bootstrap 工具提示？

Question

我已经尝试了 Stack Overflow 上的现有答案，只需更改“.tooltip-inner”样式即可。但我仍然看到默认的黑色背景。

我尝试过的CSS：

.tooltip-inner {
  background-color: pink !important;
}

带有工具提示的 HTML：

<strong #customTooltip="bs-tooltip" tooltip="Click below on your options" placement="bottom">Some Text</strong>
<img class="card-img-top card-image" (click)="onProvinceCardClick()" 

组件：

import { Component, ViewChild, Input } from '@angular/core';
import { TooltipDirective } from 'ngx-bootstrap';


@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})

export class CardComponent {
  @ViewChild('customTooltip') tooltip: TooltipDirective;

  onCardClick() {
    this.tooltip.toggle();
  }
}

Answer 1

在 Angular 组件中，样式默认是封装的。这意味着只有组件内的元素才会由styleUrls您提供的样式设置。

虽然这适用于大多数情况，但当您有工具提示时，它会在实际组件之外呈现。因此，它没有样式。

您可以更改组件的封装，以便样式会泄漏到外部并影响工具提示。为此，只需encapsulation在组件装饰器上设置：

@Component({
  selector: 'ngbd-tooltip-basic',
  templateUrl: './tooltip-basic.html',
  styleUrls: ['tooltip-basic.scss'],
  encapsulation: ViewEncapsulation.None,
})

这种方法的明显问题是组件中的所有样式都会泄漏到外面。为了避免这种情况，您可以在全局样式表上添加工具提示样式，这也可以。