From 33dbdf6492d05e7e2ce89eaee5ab69cd882943b3 Mon Sep 17 00:00:00 2001
From: Tiago Melo <tmelo@suse.com>
Date: Fri, 29 May 2020 09:55:29 +0000
Subject: [PATCH] mgr/dashboard: Use ng-bootstrap for Tooltip

Fixes: https://tracker.ceph.com/issues/45754

Signed-off-by: Tiago Melo <tmelo@suse.com>
---
 .../frontend/src/app/app.component.ts         | 12 ++++---
 .../src/app/ceph/block/block.module.ts        |  5 ++-
 .../ceph/block/mirroring/mirroring.module.ts  |  2 --
 .../rbd-configuration-form.component.spec.ts  |  4 +--
 .../rbd-details/rbd-details.component.html    | 12 +++----
 .../rbd-details/rbd-details.component.spec.ts |  5 ++-
 .../block/rbd-form/rbd-form.component.spec.ts |  4 +--
 .../block/rbd-list/rbd-list.component.spec.ts |  5 ++-
 .../src/app/ceph/cluster/cluster.module.ts    |  5 ++-
 .../silence-form/silence-form.component.html  | 10 +++---
 .../silence-form.component.spec.ts            |  4 +--
 .../nfs-form-client.component.html            |  2 +-
 .../frontend/src/app/ceph/nfs/nfs.module.ts   |  5 +--
 .../pool/pool-form/pool-form.component.html   | 16 ++++-----
 .../pool-form/pool-form.component.spec.ts     | 20 +++++------
 .../pool/pool-form/pool-form.component.ts     | 20 +++++------
 .../frontend/src/app/ceph/pool/pool.module.ts |  5 ++-
 .../rgw-user-form.component.html              | 36 +++++++++----------
 .../rgw-user-form.component.spec.ts           |  4 +--
 .../frontend/src/app/ceph/rgw/rgw.module.ts   |  7 ++--
 .../workbench-layout.component.ts             | 12 +------
 .../app/core/navigation/navigation.module.ts  |  2 --
 .../shared/components/components.module.ts    |  5 ++-
 .../select-badges.component.spec.ts           |  5 ++-
 .../components/select/select.component.html   |  2 +-
 .../select/select.component.spec.ts           |  5 ++-
 .../usage-bar/usage-bar.component.html        |  2 +-
 .../usage-bar/usage-bar.component.spec.ts     |  4 +--
 .../mgr/dashboard/frontend/src/styles.scss    |  4 ---
 29 files changed, 97 insertions(+), 127 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts
index 20bbac20fba..5f483cc9456 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
+import { NgbPopoverConfig, NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'cd-root',
@@ -8,9 +8,11 @@ import { NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  constructor(config: NgbPopoverConfig) {
-    config.autoClose = 'outside';
-    config.container = 'body';
-    config.placement = 'bottom';
+  constructor(popoverConfig: NgbPopoverConfig, tooltipConfig: NgbTooltipConfig) {
+    popoverConfig.autoClose = 'outside';
+    popoverConfig.container = 'body';
+    popoverConfig.placement = 'bottom';
+
+    tooltipConfig.container = 'body';
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
index c568b0bcd1a..f63bb3d53d6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
@@ -3,14 +3,13 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { TreeModule } from 'angular-tree-component';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
 import { FeatureTogglesGuardService } from '../../shared/services/feature-toggles-guard.service';
@@ -64,7 +63,7 @@ import { RbdTrashRestoreModalComponent } from './rbd-trash-restore-modal/rbd-tra
     ProgressbarModule.forRoot(),
     BsDropdownModule.forRoot(),
     BsDatepickerModule.forRoot(),
-    TooltipModule.forRoot(),
+    NgbTooltipModule,
     ModalModule.forRoot(),
     SharedModule,
     RouterModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
index f5659558479..ecbf6c41ada 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
@@ -8,7 +8,6 @@ import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { SharedModule } from '../../../shared/shared.module';
 
@@ -42,7 +41,6 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     ProgressbarModule.forRoot(),
     BsDropdownModule.forRoot(),
     ModalModule.forRoot(),
-    TooltipModule.forRoot(),
     NgBootstrapFormValidationModule
   ],
   declarations: [
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.spec.ts
index ebffe8a5a8c..e334098a901 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.spec.ts
@@ -5,7 +5,6 @@ import { By } from '@angular/platform-browser';
 
 import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
 import { PositioningService } from 'ngx-bootstrap/positioning';
-import { TooltipConfig, TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { configureTestBed, FormHelper, i18nProviders } from '../../../../testing/unit-test-helper';
 import { DirectivesModule } from '../../../shared/directives/directives.module';
@@ -24,12 +23,11 @@ describe('RbdConfigurationFormComponent', () => {
   let fh: FormHelper;
 
   configureTestBed({
-    imports: [ReactiveFormsModule, TooltipModule, DirectivesModule, SharedModule],
+    imports: [ReactiveFormsModule, DirectivesModule, SharedModule],
     declarations: [RbdConfigurationFormComponent],
     providers: [
       ComponentLoaderFactory,
       PositioningService,
-      TooltipConfig,
       RbdConfigurationService,
       FormatterService,
       DimlessBinaryPerSecondPipe,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html
index 6189e97ebf2..73187903102 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html
@@ -62,7 +62,7 @@
               <td>
                 <span *ngIf="selection.features_name?.indexOf('fast-diff') === -1">
                   <span class="form-text text-muted"
-                        [tooltip]="usageNotAvailableTooltipTpl"
+                        [ngbTooltip]="usageNotAvailableTooltipTpl"
                         placement="right"
                         i18n>N/A</span>
                 </span>
@@ -77,7 +77,7 @@
               <td>
                 <span *ngIf="selection.features_name?.indexOf('fast-diff') === -1">
                   <span class="form-text text-muted"
-                        [tooltip]="usageNotAvailableTooltipTpl"
+                        [ngbTooltip]="usageNotAvailableTooltipTpl"
                         placement="right"
                         i18n>N/A</span>
                 </span>
@@ -147,12 +147,12 @@
              let-value="value">
   <ng-container *ngIf="+value; else global">
     <strong i18n
-            i18n-tooltip
-            tooltip="This setting overrides the global value">Image</strong>
+            i18n-ngbTooltip
+            ngbTooltip="This setting overrides the global value">Image</strong>
   </ng-container>
   <ng-template #global>
     <span i18n
-          i18n-tooltip
-          tooltip="This is the global value. No value for this option has been set for this image.">Global</span>
+          i18n-ngbTooltip
+          ngbTooltip="This is the global value. No value for this option has been set for this image.">Global</span>
   </ng-template>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.spec.ts
index c555cb10254..409fe50d14e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.spec.ts
@@ -1,8 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../shared/shared.module';
@@ -16,7 +15,7 @@ describe('RbdDetailsComponent', () => {
 
   configureTestBed({
     declarations: [RbdDetailsComponent, RbdSnapshotListComponent, RbdConfigurationListComponent],
-    imports: [SharedModule, TooltipModule.forRoot(), RouterTestingModule, NgbNavModule]
+    imports: [SharedModule, NgbTooltipModule, RouterTestingModule, NgbNavModule]
   });
 
   beforeEach(() => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts
index 31a984079a8..f0ba4ad48e4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts
@@ -3,7 +3,6 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testin
 import { ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { ToastrModule } from 'ngx-toastr';
 
@@ -35,8 +34,7 @@ describe('RbdFormComponent', () => {
       ReactiveFormsModule,
       RouterTestingModule,
       ToastrModule.forRoot(),
-      SharedModule,
-      TooltipModule
+      SharedModule
     ],
     declarations: [RbdFormComponent, RbdConfigurationFormComponent],
     providers: [
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
index 2a425a7b08c..38b6061fad1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
@@ -3,10 +3,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { ToastrModule } from 'ngx-toastr';
 import { BehaviorSubject, of } from 'rxjs';
 
@@ -47,7 +46,7 @@ describe('RbdListComponent', () => {
       BsDropdownModule.forRoot(),
       NgbNavModule,
       ModalModule.forRoot(),
-      TooltipModule.forRoot(),
+      NgbTooltipModule,
       ToastrModule.forRoot(),
       RouterTestingModule,
       HttpClientTestingModule
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
index ab71ef5bc66..f597a57ace7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -3,14 +3,13 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { NgbNavModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbTooltipModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { TreeModule } from 'angular-tree-component';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TimepickerModule } from 'ngx-bootstrap/timepicker';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { OrchestratorDocModalComponent } from '../../shared/components/orchestrator-doc-modal/orchestrator-doc-modal.component';
 import { SharedModule } from '../../shared/shared.module';
@@ -76,7 +75,7 @@ import { TelemetryComponent } from './telemetry/telemetry.component';
     BsDropdownModule.forRoot(),
     BsDatepickerModule.forRoot(),
     ModalModule.forRoot(),
-    TooltipModule.forRoot(),
+    NgbTooltipModule,
     MgrModulesModule,
     NgbTypeaheadModule,
     TimepickerModule.forRoot(),
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
index cd491bf67f5..60076414b62 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
@@ -5,7 +5,7 @@
     <ng-container *ngFor="let config of matcherConfig">
       <div class="input-group-prepend">
         <span class="input-group-text"
-              [tooltip]="config.tooltip">
+              [ngbTooltip]="config.tooltip">
           <i [ngClass]="[config.icon]"></i>
         </span>
       </div>
@@ -37,16 +37,16 @@
       <button type="button"
               class="btn btn-light"
               id="matcher-edit-{{index}}"
-              i18n-tooltip
-              tooltip="Edit"
+              i18n-ngbTooltip
+              ngbTooltip="Edit"
               (click)="showMatcherModal(index)">
         <i [ngClass]="[icons.edit]"></i>
       </button>
       <button type="button"
               class="btn btn-light"
               id="matcher-delete-{{index}}"
-              i18n-tooltip
-              tooltip="Delete"
+              i18n-ngbTooltip
+              ngbTooltip="Delete"
               (click)="deleteMatcher(index)">
         <i [ngClass]="[icons.trash]"></i>
       </button>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.spec.ts
index c0446c0bac7..b331140d655 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.spec.ts
@@ -5,10 +5,10 @@ import { By } from '@angular/platform-browser';
 import { ActivatedRoute, Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import * as _ from 'lodash';
 import { BsDatepickerDirective, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { BsModalService } from 'ngx-bootstrap/modal';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { ToastrModule } from 'ngx-toastr';
 import { of, throwError } from 'rxjs';
 
@@ -62,7 +62,7 @@ describe('SilenceFormComponent', () => {
       BsDatepickerModule.forRoot(),
       SharedModule,
       ToastrModule.forRoot(),
-      TooltipModule.forRoot(),
+      NgbTooltipModule,
       ReactiveFormsModule
     ],
     providers: [
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html
index 03fdc53c8d9..f2cb26b1882 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html
@@ -19,7 +19,7 @@
             {{ (index + 1) | ordinal }}
             <span class="float-right clickable"
                   (click)="removeClient(index)"
-                  tooltip="Remove">&times;</span>
+                  ngbTooltip="Remove">&times;</span>
           </div>
 
           <div class="card-body">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs.module.ts
index 568e47280f1..e72b1cd39a7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { NgbNavModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbTooltipModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 
 import { SharedModule } from '../../shared/shared.module';
@@ -21,7 +21,8 @@ import { NfsListComponent } from './nfs-list/nfs-list.component';
     NgbNavModule,
     CommonModule,
     NgbTypeaheadModule,
-    NgBootstrapFormValidationModule
+    NgBootstrapFormValidationModule,
+    NgbTooltipModule
   ],
   declarations: [
     NfsListComponent,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
index 8e6fd0aa6b3..b21e94f8e1a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
@@ -233,10 +233,10 @@
                   <button class="btn btn-light"
                           type="button"
                           *ngIf="!editing"
-                          tooltip="This profile can't be deleted as it is in use."
-                          i18n-tooltip
-                          triggers=""
-                          #ecpDeletionBtn="bs-tooltip"
+                          ngbTooltip="This profile can't be deleted as it is in use."
+                          i18n-ngbTooltip
+                          triggers="manual"
+                          #ecpDeletionBtn="ngbTooltip"
                           (click)="deleteErasureCodeProfile()">
                     <i [ngClass]="[icons.trash]"
                        aria-hidden="true"></i>
@@ -335,10 +335,10 @@
                     <button class="btn btn-light"
                             *ngIf="isReplicated && !editing"
                             type="button"
-                            tooltip="This rule can't be deleted as it is in use."
-                            i18n-tooltip
-                            triggers=""
-                            #crushDeletionBtn="bs-tooltip"
+                            ngbTooltip="This rule can't be deleted as it is in use."
+                            i18n-ngbTooltip
+                            triggers="manual"
+                            #crushDeletionBtn="ngbTooltip"
                             (click)="deleteCrushRule()">
                       <i [ngClass]="[icons.trash]"
                          aria-hidden="true"></i>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
index 81efd8af31c..eab97750c6c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
@@ -873,7 +873,7 @@ describe('PoolFormComponent', () => {
         });
 
         it('should not open the tooltip nor the crush info', () => {
-          expect(component.crushDeletionBtn.isOpen).toBe(false);
+          expect(component.crushDeletionBtn.isOpen()).toBe(false);
           expect(component.data.crushInfo).toBe(false);
         });
 
@@ -895,13 +895,13 @@ describe('PoolFormComponent', () => {
 
         it('should not have called delete and opened the tooltip', () => {
           expect(crushRuleService.delete).not.toHaveBeenCalled();
-          expect(component.crushDeletionBtn.isOpen).toBe(true);
+          expect(component.crushDeletionBtn.isOpen()).toBe(true);
           expect(component.data.crushInfo).toBe(true);
         });
 
         it('should hide the tooltip when clicking on delete again', () => {
           component.deleteCrushRule();
-          expect(component.crushDeletionBtn.isOpen).toBe(false);
+          expect(component.crushDeletionBtn.isOpen()).toBe(false);
         });
 
         it('should hide the tooltip when clicking on add', () => {
@@ -911,12 +911,12 @@ describe('PoolFormComponent', () => {
             }
           }));
           component.addCrushRule();
-          expect(component.crushDeletionBtn.isOpen).toBe(false);
+          expect(component.crushDeletionBtn.isOpen()).toBe(false);
         });
 
         it('should hide the tooltip when changing the crush rule', () => {
           selectRuleByIndex(0);
-          expect(component.crushDeletionBtn.isOpen).toBe(false);
+          expect(component.crushDeletionBtn.isOpen()).toBe(false);
         });
       });
     });
@@ -1029,7 +1029,7 @@ describe('PoolFormComponent', () => {
         });
 
         it('should not open the tooltip nor the crush info', () => {
-          expect(component.ecpDeletionBtn.isOpen).toBe(false);
+          expect(component.ecpDeletionBtn.isOpen()).toBe(false);
           expect(component.data.erasureInfo).toBe(false);
         });
 
@@ -1055,13 +1055,13 @@ describe('PoolFormComponent', () => {
 
         it('should not have called delete and opened the tooltip', () => {
           expect(ecpService.delete).not.toHaveBeenCalled();
-          expect(component.ecpDeletionBtn.isOpen).toBe(true);
+          expect(component.ecpDeletionBtn.isOpen()).toBe(true);
           expect(component.data.erasureInfo).toBe(true);
         });
 
         it('should hide the tooltip when clicking on delete again', () => {
           component.deleteErasureCodeProfile();
-          expect(component.ecpDeletionBtn.isOpen).toBe(false);
+          expect(component.ecpDeletionBtn.isOpen()).toBe(false);
         });
 
         it('should hide the tooltip when clicking on add', () => {
@@ -1071,12 +1071,12 @@ describe('PoolFormComponent', () => {
             }
           }));
           component.addErasureCodeProfile();
-          expect(component.ecpDeletionBtn.isOpen).toBe(false);
+          expect(component.ecpDeletionBtn.isOpen()).toBe(false);
         });
 
         it('should hide the tooltip when changing the crush rule', () => {
           setSelectedEcp('someEcpName');
-          expect(component.ecpDeletionBtn.isOpen).toBe(false);
+          expect(component.ecpDeletionBtn.isOpen()).toBe(false);
         });
       });
     });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
index b06f6d054a4..460a4157d47 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
@@ -2,12 +2,10 @@ import { Component, EventEmitter, OnInit, Type, ViewChild } from '@angular/core'
 import { FormControl, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { NgbNav } from '@ng-bootstrap/ng-bootstrap';
-
+import { NgbNav, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { I18n } from '@ngx-translate/i18n-polyfill';
 import * as _ from 'lodash';
 import { BsModalService } from 'ngx-bootstrap/modal';
-import { TooltipDirective } from 'ngx-bootstrap/tooltip';
 import { Observable, Subscription } from 'rxjs';
 
 import { CrushRuleService } from '../../../shared/api/crush-rule.service';
@@ -56,9 +54,9 @@ interface FormFieldDescription {
 })
 export class PoolFormComponent extends CdForm implements OnInit {
   @ViewChild('crushInfoTabs') crushInfoTabs: NgbNav;
-  @ViewChild('crushDeletionBtn') crushDeletionBtn: TooltipDirective;
+  @ViewChild('crushDeletionBtn') crushDeletionBtn: NgbTooltip;
   @ViewChild('ecpInfoTabs') ecpInfoTabs: NgbNav;
-  @ViewChild('ecpDeletionBtn') ecpDeletionBtn: TooltipDirective;
+  @ViewChild('ecpDeletionBtn') ecpDeletionBtn: NgbTooltip;
 
   permission: Permission;
   form: CdFormGroup;
@@ -336,8 +334,8 @@ export class PoolFormComponent extends CdForm implements OnInit {
     });
     this.form.get('crushRule').valueChanges.subscribe((rule) => {
       // The crush rule can only be changed if type 'replicated' is set.
-      if (this.crushDeletionBtn && this.crushDeletionBtn.isOpen) {
-        this.crushDeletionBtn.hide();
+      if (this.crushDeletionBtn && this.crushDeletionBtn.isOpen()) {
+        this.crushDeletionBtn.close();
       }
       if (!rule) {
         return;
@@ -353,8 +351,8 @@ export class PoolFormComponent extends CdForm implements OnInit {
     });
     this.form.get('erasureProfile').valueChanges.subscribe((profile) => {
       // The ec profile can only be changed if type 'erasure' is set.
-      if (this.ecpDeletionBtn && this.ecpDeletionBtn.isOpen) {
-        this.ecpDeletionBtn.hide();
+      if (this.ecpDeletionBtn && this.ecpDeletionBtn.isOpen()) {
+        this.ecpDeletionBtn.close();
       }
       if (!profile) {
         return;
@@ -583,7 +581,7 @@ export class PoolFormComponent extends CdForm implements OnInit {
   }
 
   private hideOpenTooltips() {
-    const hideTooltip = (btn: TooltipDirective) => btn && btn.isOpen && btn.hide();
+    const hideTooltip = (btn: NgbTooltip) => btn && btn.isOpen() && btn.close();
     hideTooltip(this.ecpDeletionBtn);
     hideTooltip(this.crushDeletionBtn);
   }
@@ -657,7 +655,7 @@ export class PoolFormComponent extends CdForm implements OnInit {
   }: {
     value: any;
     usage: string[];
-    deletionBtn: TooltipDirective;
+    deletionBtn: NgbTooltip;
     dataName: string;
     getTabs: () => NgbNav;
     tabPosition: string;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
index 6e15ba7ac93..4a936bf6ee8 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
@@ -3,10 +3,9 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
 import { SharedModule } from '../../shared/shared.module';
@@ -27,7 +26,7 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     RouterModule,
     ReactiveFormsModule,
     BsDropdownModule,
-    TooltipModule.forRoot(),
+    NgbTooltipModule,
     BlockModule,
     NgBootstrapFormValidationModule
   ],
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
index 1c48f90139a..164f6c2b3e8 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
@@ -231,15 +231,15 @@
                   <span class="input-group-append">
                     <button type="button"
                             class="btn btn-light tc_showSubuserButton"
-                            i18n-tooltip
-                            tooltip="Edit"
+                            i18n-ngbTooltip
+                            ngbTooltip="Edit"
                             (click)="showSubuserModal(i)">
                       <i [ngClass]="[icons.edit]"></i>
                     </button>
                     <button type="button"
                             class="btn btn-light tc_deleteSubuserButton"
-                            i18n-tooltip
-                            tooltip="Delete"
+                            i18n-ngbTooltip
+                            ngbTooltip="Delete"
                             (click)="deleteSubuser(i)">
                       <i [ngClass]="[icons.destroy]"></i>
                     </button>
@@ -293,15 +293,15 @@
                   <span class="input-group-append">
                     <button type="button"
                             class="btn btn-light tc_showS3KeyButton"
-                            i18n-tooltip
-                            tooltip="Show"
+                            i18n-ngbTooltip
+                            ngbTooltip="Show"
                             (click)="showS3KeyModal(i)">
                       <i [ngClass]="[icons.show]"></i>
                     </button>
                     <button type="button"
                             class="btn btn-light tc_deleteS3KeyButton"
-                            i18n-tooltip
-                            tooltip="Delete"
+                            i18n-ngbTooltip
+                            ngbTooltip="Delete"
                             (click)="deleteS3Key(i)">
                       <i [ngClass]="[icons.destroy]"></i>
                     </button>
@@ -354,8 +354,8 @@
                   <span class="input-group-append">
                     <button type="button"
                             class="btn btn-light tc_showSwiftKeyButton"
-                            i18n-tooltip
-                            tooltip="Show"
+                            i18n-ngbTooltip
+                            ngbTooltip="Show"
                             (click)="showSwiftKeyModal(i)">
                       <i [ngClass]="[icons.show]"></i>
                     </button>
@@ -393,15 +393,15 @@
                   <span class="input-group-append">
                     <button type="button"
                             class="btn btn-light tc_editCapButton"
-                            i18n-tooltip
-                            tooltip="Edit"
+                            i18n-ngbTooltip
+                            ngbTooltip="Edit"
                             (click)="showCapabilityModal(i)">
                       <i [ngClass]="[icons.edit]"></i>
                     </button>
                     <button type="button"
                             class="btn btn-light tc_deleteCapButton"
-                            i18n-tooltip
-                            tooltip="Delete"
+                            i18n-ngbTooltip
+                            ngbTooltip="Delete"
                             (click)="deleteCapability(i)">
                       <i [ngClass]="[icons.destroy]"></i>
                     </button>
@@ -415,10 +415,10 @@
                   <button type="button"
                           class="btn btn-light float-right tc_addCapButton"
                           [disabled]="hasAllCapabilities()"
-                          i18n-tooltip
-                          tooltip="All capabilities are already added."
-                          [isDisabled]="!hasAllCapabilities()"
-                          triggers="pointerenter pointerleave"
+                          i18n-ngbTooltip
+                          ngbTooltip="All capabilities are already added."
+                          [disableTooltip]="!hasAllCapabilities()"
+                          triggers="pointerenter:pointerleave"
                           (click)="showCapabilityModal()">
                     <i [ngClass]="[icons.add]"></i>
                     <ng-container i18n>{{ actionLabels.ADD | titlecase }}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.spec.ts
index 516bddd0306..eb4a9619cf7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.spec.ts
@@ -4,8 +4,8 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { BsModalService } from 'ngx-bootstrap/modal';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { ToastrModule } from 'ngx-toastr';
 import { of as observableOf } from 'rxjs';
 
@@ -33,7 +33,7 @@ describe('RgwUserFormComponent', () => {
       RouterTestingModule,
       SharedModule,
       ToastrModule.forRoot(),
-      TooltipModule.forRoot()
+      NgbTooltipModule
     ],
     providers: [BsModalService, i18nProviders]
   });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
index 26371d7df33..97066113952 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
@@ -3,11 +3,10 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { ActionLabels, URLVerbs } from '../../shared/constants/app.constants';
 import { AuthGuardService } from '../../shared/services/auth-guard.service';
@@ -45,10 +44,10 @@ import { RgwUserSwiftKeyModalComponent } from './rgw-user-swift-key-modal/rgw-us
     PerformanceCounterModule,
     BsDropdownModule.forRoot(),
     NgbNavModule,
-    TooltipModule.forRoot(),
     ModalModule.forRoot(),
     RouterModule,
-    NgBootstrapFormValidationModule
+    NgBootstrapFormValidationModule,
+    NgbTooltipModule
   ],
   exports: [
     Rgw501Component,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.ts
index 66589c9609c..5ad4535474a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { TooltipConfig } from 'ngx-bootstrap/tooltip';
 import { Subscription } from 'rxjs';
 
 import { SummaryService } from '../../../shared/services/summary.service';
@@ -10,16 +9,7 @@ import { TaskManagerService } from '../../../shared/services/task-manager.servic
 @Component({
   selector: 'cd-workbench-layout',
   templateUrl: './workbench-layout.component.html',
-  styleUrls: ['./workbench-layout.component.scss'],
-  providers: [
-    {
-      provide: TooltipConfig,
-      useFactory: (): TooltipConfig =>
-        Object.assign(new TooltipConfig(), {
-          container: 'body'
-        })
-    }
-  ]
+  styleUrls: ['./workbench-layout.component.scss']
 })
 export class WorkbenchLayoutComponent implements OnInit, OnDestroy {
   private subs = new Subscription();
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
index 6f063747395..bee03ba03a4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
@@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router';
 
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { SimplebarAngularModule } from 'simplebar-angular';
 
 import { AppRoutingModule } from '../../app-routing.module';
@@ -25,7 +24,6 @@ import { NotificationsComponent } from './notifications/notifications.component'
     AuthModule,
     CollapseModule.forRoot(),
     BsDropdownModule.forRoot(),
-    TooltipModule.forRoot(),
     AppRoutingModule,
     SharedModule,
     SimplebarAngularModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 592a36b70b4..c9f851e7f21 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -3,14 +3,13 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { NgbAlertModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbAlertModule, NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { ClickOutsideModule } from 'ng-click-outside';
 import { ChartsModule } from 'ng2-charts';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { SimplebarAngularModule } from 'simplebar-angular';
 
 import { DirectivesModule } from '../directives/directives.module';
@@ -46,7 +45,7 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     NgbAlertModule,
     NgbPopoverModule,
     ProgressbarModule.forRoot(),
-    TooltipModule.forRoot(),
+    NgbTooltipModule,
     ChartsModule,
     ReactiveFormsModule,
     PipesModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts
index 683140cb7e5..8986901b3b4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts
@@ -1,9 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule, Validators } from '@angular/forms';
 
-import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { I18n } from '@ngx-translate/i18n-polyfill';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { SelectMessages } from '../select/select-messages.model';
@@ -16,7 +15,7 @@ describe('SelectBadgesComponent', () => {
 
   configureTestBed({
     declarations: [SelectBadgesComponent, SelectComponent],
-    imports: [NgbPopoverModule, TooltipModule, ReactiveFormsModule],
+    imports: [NgbPopoverModule, NgbTooltipModule, ReactiveFormsModule],
     providers: i18nProviders
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html
index 7d520b4174a..5f5712c7bfe 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html
@@ -53,7 +53,7 @@
   <div class="is-invalid"
        *ngIf="data.length === selectionLimit">
     <span class="form-text text-muted text-center text-warning"
-          [tooltip]="messages.selectionLimit.tooltip"
+          [ngbTooltip]="messages.selectionLimit.tooltip"
           *ngIf="data.length === selectionLimit">
       {{ messages.selectionLimit.text }}
     </span>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts
index c4c5a8b01c5..45bb8d38ba7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.spec.ts
@@ -1,8 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule, Validators } from '@angular/forms';
 
-import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { SelectOption } from './select-option.model';
@@ -20,7 +19,7 @@ describe('SelectComponent', () => {
 
   configureTestBed({
     declarations: [SelectComponent],
-    imports: [NgbPopoverModule, TooltipModule, ReactiveFormsModule],
+    imports: [NgbPopoverModule, NgbTooltipModule, ReactiveFormsModule],
     providers: i18nProviders
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html
index e75d0908784..e6d3ef251dc 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html
@@ -13,7 +13,7 @@
 
 <div class="progress"
      data-placement="left"
-     [tooltip]="usageTooltipTpl">
+     [ngbTooltip]="usageTooltipTpl">
   <div class="progress-bar bg-info"
        role="progressbar"
        [style.width]="usedPercentage + '%'">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.spec.ts
index 334e601f471..2cc510b9d41 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { PipesModule } from '../../pipes/pipes.module';
@@ -11,7 +11,7 @@ describe('UsageBarComponent', () => {
   let fixture: ComponentFixture<UsageBarComponent>;
 
   configureTestBed({
-    imports: [PipesModule, TooltipModule.forRoot()],
+    imports: [PipesModule, NgbTooltipModule],
     declarations: [UsageBarComponent]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 672480c1936..ab63ed5ae57 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -387,10 +387,6 @@ cd-modal {
   background: $color-transparent-black !important;
 }
 
-.tooltip-wide .tooltip-inner {
-  width: 400px;
-}
-
 .tooltip-inner {
   background-color: white;
   border: 1px solid grey;
-- 
2.39.5