CODEWITHSUNDEEP
angulartwitter-bootstrapbootstrap-4angular7ngx-bootstrap
Ricky
Ricky

Reputation: 3072

Ngx-bootstrap Tooltips not Showing

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

Upvotes: 1

Views: 6119

Answers (1)

Lucho
Lucho

Reputation: 1547

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.

Upvotes: 4

Related Questions