如何为ngx-bootstrap的工具提示（tooltip）添加自定义CSS？

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();
  }
}

- Kode_12

Answer 1

在Angular组件中，样式默认是封装的。这意味着您提供的将会为组件内部的元素进行样式设置。

虽然这对大多数情况下都有效，但当您有一个工具提示时，它会在实际组件之外呈现。因此，它没有被样式化。

您可以更改组件的封装方式，以便样式泄漏到外部并影响工具提示。要做到这一点，只需在组件装饰器上设置即可。

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

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

- nipuna777

---

这是正确的答案，只是我希望有更好的方法。 - Kode_12