如何使用工具提示自定义 class.[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 {}

或使用自定义 class

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

如何使用工具提示自定义 class.[ngx-bootstrap]

how to use tooltip Custom class.[ngx-bootstrap]

ngx-bootstrap

angular