Question

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

我试过的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,
})

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

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

1 个答案: