Set global config of tooltip for ng-bootstrap

Question

I'm trying to set a global config for tooltips using ng-bootstrap. By default I want the container to be "body". I see the code needed for it on the ng-bootstrap page:

https://ng-bootstrap.github.io/#/components/tooltip

I guess I don't know where to put that. I have tried placing it into the app.component.ts file but it doesn't seem to do anything there.

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  host: {'class': 'global'},
  providers: [NgbTooltipConfig]
})

export class AppComponent {
  isCollapsed:boolean;

  constructor() {
    this.isCollapsed = true;
  }
}

export class NgbdTooltipConfig {
  constructor(config: NgbTooltipConfig) {
    config.placement = 'right';
    config.container = 'body';
    config.triggers = 'hover';
  }
}

I am using Bootstrap 4 with Angular 4.

Answer 1

As, explained in docs:

You can inject this service, typically in your root component, and customize the values of its properties in order to provide default values for all the tooltips used in the application.

You don't need to create a new class, you can do it inside your main component:

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  host: {'class': 'global'},
  providers: [NgbTooltipConfig]
})

export class AppComponent {
 
  isCollapsed: boolean;

  constructor(config: NgbTooltipConfig) {
    config.placement = 'right';
    config.container = 'body';
    config.triggers = 'hover';
    this.isCollapsed = true;
  }
}