ng-bootstrap not displaying tooltip

问题

I want to display a tooltip. I went to ng-bootstrap and integrated that code. Getting console error.

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for 
NgbTooltipConfig!
Error: No provider for NgbTooltipConfig!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9492)
at NgModuleRef_.get (core.es5.js:10562)
at resolveDep (core.es5.js:11050)
at createClass (core.es5.js:10920)

Added these lines in app.module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [    
    NgbModule
  ]
})

Installed ng-bootstrap using command

npm install --save @ng-bootstrap/ng-bootstrap

回答1:

You should import NgbModule.forRoot() not NgbModule.

The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}
Other modules in your application can simply import NgbModule:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})
export class OtherModule {
}

For more details , please read :

https://ng-bootstrap.github.io/#/getting-started

Here is the working example of tooltip :

http://plnkr.co/edit/AVylfgSqv5iLVi73LGz7?p=preview

Please compare your code with it.

回答2:

add NgbTooltipConfig to providers

@NgModule({
  imports: [    
    NgbModule
  ],
  providers: [
     NgbTooltipConfig
  ]
})

and also add this css to your style.css

.tooltip{
  opacity:1!important;
}

来源：https://stackoverflow.com/questions/47264723/ng-bootstrap-not-displaying-tooltip

标签

angular

ng-bootstrap