From d67159a491bef8588d4e58394fd66b57c8c3ae35 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 16 Aug 2024 17:42:55 +0300
Subject: [PATCH] UI: Fix show widget action in tooltip

---
 .../components/dashboard-page/dashboard-page.models.ts    | 3 +++
 .../home/components/widget/widget-container.component.ts  | 8 ++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
index 540fd0d69b..8ce2ab0679 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
@@ -29,6 +29,7 @@ import { ILayoutController } from './layout/layout.models';
 import { DashboardContextMenuItem, WidgetContextMenuItem } from '@home/models/dashboard-component.models';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface';
+import { ElementRef } from '@angular/core';
 
 export declare type DashboardPageScope = 'tenant' | 'customer';
 
@@ -54,6 +55,8 @@ export interface DashboardContext {
 
 export interface IDashboardController {
   dashboardCtx: DashboardContext;
+  dashboardContainer: ElementRef;
+  elRef: ElementRef;
   openRightLayout();
   openDashboardState(stateId: string, openRightLayout: boolean);
   addWidget($event: Event, layoutCtx: DashboardPageLayoutContext);
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
index 0bf5bb0327..698b78eaa7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
@@ -253,10 +253,12 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
 
   private initEditWidgetActionTooltip() {
     from(import('tooltipster')).subscribe(() => {
+      const dashboardElement = this.widget.widgetContext.dashboard.stateController.dashboardCtrl.elRef.nativeElement;
       $(this.gridsterItem.el).tooltipster({
+        parent: $(dashboardElement),
         delay: this.widget.selected ? [0, 10000000] : [0, 100],
         distance: 2,
-        zIndex: 1000,
+        zIndex: 151,
         arrow: false,
         theme: ['tb-widget-edit-actions-tooltip'],
         interactive: true,
@@ -273,7 +275,9 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
         content: '',
         functionPosition: (instance, helper, position) => {
           const clientRect = helper.origin.getBoundingClientRect();
-          position.coord.left = clientRect.right - position.size.width;
+          const container = dashboardElement.getBoundingClientRect();
+          position.coord.left = clientRect.right - position.size.width - container.left;
+          position.coord.top = position.coord.top - container.top;
           position.target = clientRect.right;
           return position;
         },