ngbTooltipConfig tooltipКласс не загружает всплывающую подсказку стиля

Question

Я пытаюсь добавить пользовательский класс в ngbTooltip, который отлично работает на официальной документации ng- bootstrap ng Bootstrap Ссылка

Я пытаюсь повторить то же самое в моем коде:

tooltip-test.component. html

<div class="row mt-5 ml-5">
  <div class="col">
    <button type="button" class="btn btn-primary" ngbTooltip="Tool tip on top" placement="top"
      tooltipClass="my-custom-class">Tooltip</button>
  </div>
</div>

tooltip-test.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-tooltip-test',
  templateUrl: './tooltip-test.component.html',
  styleUrls: ['./tooltip-test.component.css'],
  providers: [NgbTooltipConfig],
  // encapsulation: ViewEncapsulation.None
})
export class TooltipTestComponent implements OnInit {

  constructor(tooltipConfig: NgbTooltipConfig) {
    tooltipConfig.openDelay = 500;
    tooltipConfig.tooltipClass = 'my-custom-class'
   }

  ngOnInit() {
  }

}

tooltip-test.component. css

.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}

Но я хочу добиться того же, не используя encapsulation: ViewEncapsulation.None или ::ng-deep или :host в моем коде. tooltipConfig.openDelay = 500; работает нормально, но tooltipConfig.tooltipClass = 'my-custom-class' не загружает класс. Я даже попробовал tooltipClass="my-custom-class" в HTML. Может кто-нибудь сказать мне, где я иду не так?

Stackblitz Ссылка, где код не работает

Answer 1

Все, что вам нужно, это понять, что такое инкапсуляция вида в Angular. Вот хорошая статья: https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html