ngx-bootstrap tooltip in angular not working

Question

Good day everyone, I am using [email protected] in angular 14 and bootstrap 5 to display a tooltip but its not showing. Here is the HTML in the template file:

<td tooltip="Hi this is a term"><i>{{item.term}}</i></td>

I did everything according to the documentation here

I have imported the TooltipModule in the admin.module.ts as below;

import { TooltipModule } from "ngx-bootstrap/tooltip";

And I included it in the imports as below

imports: [...TooltipModule.forRoot(), PopoverModule.forRoot()]

I even uninstalled the package and reinstalled it but it did not work.

Below is my package.json

{
  "name": "fiaschool-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/cdk": "^14.2.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "bootstrap": "^5.2.3",
    "ngx-bootstrap": "^9.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.5",
    "@angular/cli": "~14.2.5",
    "@angular/compiler-cli": "^14.2.0",
    "@types/jasmine": "~4.0.0",
    "@types/jquery": "^3.5.19",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}

Please if any one has any idea why the tooltip is not displaying, help me out here. Thank you in advance.

@Pieterjan-I didn't get any error. It simply refuses to display. — Awar Denen
– Awar Denen, Commented Nov 11, 2023 at 6:35

Michelle Diamond · Accepted Answer · 2025-06-02 06:18:40Z

0

Try this:

<div ngbTooltip="tooltip wording here" placement="bottom-end"  tooltipClass="optional_class">

You can find the documentation here: https://ng-bootstrap.github.io/#/components/tooltip/examples

edited Jun 2 at 6:18

answered Mar 5, 2024 at 11:11

Michelle Diamond

235 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

ngx-bootstrap tooltip in angular not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related