0
votes

I want to change the transparency and color of the tooltip.
I think that it is possible using containerClass, but how can it be realized concretely?
Although the background color of the document demo is yellow, there is no description in the code, so I do not know how to do it.

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

1
Added stackblitz. customClass does not work. stackblitz.com/edit/angular-pt71gs - otera

1 Answers

1
votes

Globally it can be something like

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

Note: you need to have these styles in a global styles file not component styles file.

OR

You can use Component level styling options:

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 {}

Or use Custom class

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