mgr/dashboard: Fixes tooltip behavior

The problem was that the tool tip element was added to the current parent
element which caused the CSS to make the last
button in a button group look like the fore last button as a rectangle
but the last element should have a rounded corner.

Fixes: https://tracker.ceph.com/issues/38932
Signed-off-by: Stephan Müller <smueller@suse.com>

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 29c168415e81fbec2df06b8e18abe3652a1f258a..938449dde251b2db2d1ee4558a200e85bccf3850 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts
@@ -2,13 +2,23 @@ import { Component, ViewContainerRef } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { ToastsManager } from 'ng2-toastr';
+import { TooltipConfig } from 'ngx-bootstrap/tooltip';
 
 import { AuthStorageService } from './shared/services/auth-storage.service';
 
 @Component({
   selector: 'cd-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  providers: [
+    {
+      provide: TooltipConfig,
+      useFactory: (): TooltipConfig =>
+        Object.assign(new TooltipConfig(), {
+          container: 'body'
+        })
+    }
+  ]
 })
 export class AppComponent {
   title = 'cd';