时间戳

首页 > 解决方案 > 如何使用工具提示自定义类。[ngx-bootstrap]

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

问题描述

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

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

标签： angularngx-bootstrap

解决方案

在全球范围内，它可能类似于

.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>

推荐阅读