21119

Set global config of tooltip for ng-bootstrap

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.

<strong>app.component.ts</strong>

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.

Answer1:

As, explained in <strong>docs</strong>:

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 <strong>inside</strong> your <strong>main</strong> component:

<strong>app.component.ts</strong>

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

Recommend

  • Will all phones support YUV 420 (Semi) Planar color format in h.264 encoder?
  • How to push configuration values from Asp.Net Core MVC 2.0 config file to React TypeScript client sc
  • removing the default blue color on focus
  • Angular2 & SystemJS : Cannot find module while building a moduleLoader
  • What does the TypeScript “lib” option really do?
  • php script is parsing content from RTE (tt_news) but internal links are not appearing as speaking ur
  • Doctrine/Symfony entity generator and generating entity from one table
  • Wrong labels when plotting a time series pandas dataframe with matplotlib
  • how to set variables in a php include file?
  • CERN ROOT exporting data to plain text
  • Python ImageIO Gif Set Delay Between Frames
  • Enabling DTD support in Sql Server
  • Center align outputs in ipython notebook
  • python script hangs on input method when running spark
  • How to generate and display a QR Code in ionic 2
  • pyodbc doesn't report sql server error
  • Copy to all folders batch file?
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Python urlparse: small issue
  • Typescript - Unable to get 'import' statement to function
  • Java: can you cast Class into a specific interface?
  • Recording logins for password protected directories
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • req.body is undefined - nodejs
  • AES padding and writing the ciphertext to a disk file
  • Updating server-side rendering client-side
  • Check if a string to interpolate provides expected placeholders
  • How to extract text from Word files using C#?
  • Symfony2: How to get request parameter
  • Matplotlib draw Spline from multiple points
  • Why winpcap requires both .lib and .dll to run?
  • Akka Routing: Reply's send to router ends up as dead letters
  • Return words with double consecutive letters
  • Is there a mandatory requirement to switch app.yaml?
  • Python: how to group similar lists together in a list of lists?
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • coudnt use logback because of log4j
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`
  • Busy indicator not showing up in wpf window [duplicate]