angular - 如何使用工具提示自定义类。[ngx-bootstrap]

Question

我想更改工具提示的透明度和颜色。
我觉得用containerClass是可以的，但是具体怎么实现呢？
虽然文档demo的背景色是黄色，但是代码中没有说明，所以不知道该怎么做。

https://valor-software.com/ngx-bootstrap/#/tooltip#custom-class

Answer 1

在全局范围内，它可能是这样的

.tooltip-inner {
    color: #fff !important;
    background-color: #000 !important;
}

注意:您需要将这些样式放在全局样式文件中，而不是组件样式文件中。

或者

您可以使用组件级别样式选项:

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

@Component({
  selector: 'demo-tooltip-styling-local',
  templateUrl: './styling-local.html',
  /* tslint:disable no-unused-css*/
  styles: [
    `
      :host >>> .tooltip-inner {
        background-color: #009688;
        color: #fff;
      }
      :host >>> .tooltip.top .tooltip-arrow:before,
      :host >>> .tooltip.top .tooltip-arrow {
        border-top-color: #009688;
      }
    `
  ]
})
export class DemoTooltipStylingLocalComponent {}

或者使用自定义类

<button type="button" class="btn btn-primary"
        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." containerClass="customClass">
  Demo with custom class
</button>