How to add custom css to ngx-bootstrap tooltip?

Question

I have tried the existing answers on Stack Overflow, by simply changing the '.tooltip-inner' styles. But I still see the default black background.

the css I tried:

.tooltip-inner {
  background-color: pink !important;
}

The HTML with the tooltip:

<strong #customTooltip="bs-tooltip" tooltip="Click below on your options" placement="bottom">Some Text</strong>
<img class="card-img-top card-image" (click)="onProvinceCardClick()" 

The component:

import { Component, ViewChild, Input } from '@angular/core';
import { TooltipDirective } from 'ngx-bootstrap';


@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})

export class CardComponent {
  @ViewChild('customTooltip') tooltip: TooltipDirective;

  onCardClick() {
    this.tooltip.toggle();
  }
}

Answer 1

In Angular components, styles are by default encapsulated. This means that only the elements inside the component will be styled by the styleUrls you provide.

While this works for most cases, when you have a tooltip, it is rendered outside of the actual component. Therefore, it's not styled.

You can change the encapsulation of the component so that the styles will leak outside and affect the tooltip as well. To do this simply set the encapsulation on the component decorator:

@Component({
  selector: 'ngbd-tooltip-basic',
  templateUrl: './tooltip-basic.html',
  styleUrls: ['tooltip-basic.scss'],
  encapsulation: ViewEncapsulation.None,
})

The obvious problem with this approach is that all the styles in the component will leak outside. To avoid this, you can add the tooltip style on the global stylesheet which would also work.