Ngx-bootstrap Tooltips not Showing

Question

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

Lucho Lucho · Accepted Answer · 2019-07-03T15:39:15

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.

Ngx-bootstrap Tooltips not Showing

1 Answers