Question

我想更改工具提示的透明度和颜色。
我认为可以使用containerClass，但是具体如何实现呢？
尽管文档演示的背景颜色为黄色，但是代码中没有描述，因此我不知道该怎么做。

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

Answer 1

在全球范围内可能是

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

注意：您需要在全局样式文件中而不是组件样式文件中包含这些样式。

OR

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

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>

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

1 个答案: