Warm tip: This article is reproduced from stackoverflow.com, please click
angular angular7 bootstrap-4 twitter-bootstrap ngx-bootstrap

Ngx-bootstrap Tooltips not Showing

发布于 2020-03-27 10:27:39

I'm using ngx-bootstrap 4.0.1 in an Angular 7 project with Bootstrap 4.3.1, and i need to add tooltips in some elements of the app. I followed the documentation on setting everything up, but i'm unable to get the tooltips showing. Also didn't find anything in Stack Overflow or in other forums that could help solve my issue.

app.module.ts:

import { ModalModule, TooltipModule } from 'ngx-bootstrap';

@NgModule({imports: [TooltipModule.forRoot(),...]})

component.html:

<button type="button" class="btn btn-primary" tooltip="Bazinga!">
      Bazinga
</button>

What am i missing here?

UPDATE: Added package.json information

"dependencies": {
  "@angular/animations": "^7.2.0",
  "@angular/cdk": "^7.3.7",
  "@angular/common": "~7.2.0",
  "@angular/compiler": "~7.2.0",
  "@angular/core": "~7.2.0",
  "@angular/forms": "~7.2.0",
  "@angular/platform-browser": "~7.2.0",
  "@angular/platform-browser-dynamic": "~7.2.0",
  "@angular/router": "~7.2.0",
  "@ckeditor/ckeditor5-angular": "^1.0.1",
  "@ckeditor/ckeditor5-build-classic": "^12.0.0",
  "@ng-select/ng-select": "^2.17.0",
  "angular-highcharts": "^7.2.0",
  "angular2-uuid": "^1.1.1",
  "bootstrap": "^4.3.1",
  "core-js": "^2.5.4",
  "highcharts": "^7.1.1",
  "jquery": "^3.3.1",
  "ngx-bootstrap": "^4.0.1",
  "ngx-infinite-scroll": "^7.1.0",
  "ngx-ui-switch": "^8.0.1",
  "rxjs": "~6.3.3",
  "select2": "^4.0.6-rc.1",
  "select2-bootstrap4-theme": "^1.0.0",
  "tslib": "^1.9.0",
  "zone.js": "~0.8.26"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.13.0",
  "@angular/cli": "~7.3.3",
  "@angular/compiler-cli": "~7.2.0",
  "@angular/language-service": "~7.2.0",
  "@fortawesome/fontawesome-free": "^5.7.2",
  "@types/bootstrap": "^4.3.0",
  "@types/jasmine": "~2.8.8",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "~8.9.4",
  "@types/select2": "^4.0.48",
  "codelyzer": "~4.5.0",
  "jasmine-core": "~2.99.1",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~4.0.0",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~2.0.1",
  "karma-jasmine": "~1.1.2",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~5.4.0",
  "ts-node": "~7.0.0",
  "tslint": "~5.11.0",
  "typescript": "~3.2.2"
}
Questioner
Ricky
Viewed
106
Lucho 2019-07-04 02:03

Have you done the installation instructions of the bootstrap css in order for styling to work?

Two approaches that works depending how you architect your app.

Either include a CDN, maybe the official one in your index.html with:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

or include it in your styling build of the app to your css bundle by in your angular-cli.json answerd here.