From 7f954253c1bac5a6ae445383cc4bd29c99a3bddc Mon Sep 17 00:00:00 2001
From: Aliullov Vlad <vladislav.aliullov@devexpress.com>
Date: Fri, 8 Dec 2023 00:02:42 +0400
Subject: [PATCH] fix tooltip in overlay block + alignment

---
 .../preview/overlays/overlays.component.css   |  8 +++++
 .../preview/overlays/overlays.component.html  |  2 +-
 .../preview/overlays/overlays.component.ts    | 31 -------------------
 3 files changed, 9 insertions(+), 32 deletions(-)

diff --git a/src/app/preview/overlays/overlays.component.css b/src/app/preview/overlays/overlays.component.css
index 8066aad1..52aca7a9 100644
--- a/src/app/preview/overlays/overlays.component.css
+++ b/src/app/preview/overlays/overlays.component.css
@@ -25,6 +25,14 @@
     width: 250px;
 }
 
+#tooltip-block  {
+    position: relative;
+}
+
+#tooltip-block::ng-deep  .dx-tooltip-wrapper {
+    position: initial !important;
+}
+
 #loadpanel-block {
     width: 240px;
 }
diff --git a/src/app/preview/overlays/overlays.component.html b/src/app/preview/overlays/overlays.component.html
index ca1dcb10..3d67934c 100644
--- a/src/app/preview/overlays/overlays.component.html
+++ b/src/app/preview/overlays/overlays.component.html
@@ -7,7 +7,7 @@
         <div id="toast-block">
             <div id="toast-target"></div>
         </div>
-        <div id="tooltip-block" #tooltipPreviewBlock>
+        <div id="tooltip-block">
             <div id="tooltip-preview-target">&nbsp;</div>
         </div>
     </div>
diff --git a/src/app/preview/overlays/overlays.component.ts b/src/app/preview/overlays/overlays.component.ts
index 1e45c69a..27ad5521 100644
--- a/src/app/preview/overlays/overlays.component.ts
+++ b/src/app/preview/overlays/overlays.component.ts
@@ -2,8 +2,6 @@ import { Component, OnDestroy, OnInit, ViewChild, ElementRef } from '@angular/co
 import { DxLoadPanelComponent, DxToastComponent, DxTooltipComponent } from 'devextreme-angular';
 import { BehaviorSubject, Subscription } from 'rxjs';
 
-const UPDATE_TOOLTIP_VISIBILITY_INTERVAL = 50;
-
 @Component({
     selector: 'app-overlays',
     templateUrl: './overlays.component.html',
@@ -11,10 +9,7 @@ const UPDATE_TOOLTIP_VISIBILITY_INTERVAL = 50;
 })
 export class OverlaysComponent implements OnInit, OnDestroy {
     subscription: Subscription;
-    updateTooltipVisibilityIntervalHandler: number;
 
-    @ViewChild('tooltipPreview') tooltipPreview: DxTooltipComponent;
-    @ViewChild('tooltipPreviewBlock') tooltipPreviewBlock: ElementRef;
     @ViewChild('tooltip') tooltip: DxTooltipComponent;
     @ViewChild('toast') toast: DxToastComponent;
     @ViewChild('loadPanel') loadPanel: DxLoadPanelComponent;
@@ -39,35 +34,10 @@ export class OverlaysComponent implements OnInit, OnDestroy {
         e.cancel = true;
     }
 
-    isElementInViewport(el) {
-        const rect = el.getBoundingClientRect();
-
-        return (
-            rect.top >= 0 &&
-            rect.left >= 0 &&
-            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-        );
-    }
-
-    updateVisibilityPreviewTooltip(): void {
-        const isElementInViewport = this.isElementInViewport(this.tooltipPreviewBlock?.nativeElement);
-        this.tooltipPreview.visible = isElementInViewport;
-
-        if(isElementInViewport) {
-            this.tooltipPreview.instance.repaint();
-        }
-    }
-
     ngOnInit(): void {
-        this.updateTooltipVisibilityIntervalHandler = setInterval(() => {
-            this.updateVisibilityPreviewTooltip();
-        }, UPDATE_TOOLTIP_VISIBILITY_INTERVAL);
-
         this.subscription = this.isExpanded.subscribe((value) => {
             const flexContainer = document.getElementsByTagName('app-overlays')[0].parentElement.parentElement;
             flexContainer.addEventListener('transitionend', () => {
-                if(this.tooltipPreview) this.tooltipPreview.instance.repaint();
                 if(this.tooltip) this.tooltip.instance.repaint();
                 if(this.toast) this.toast.instance.repaint();
                 if(this.loadPanel) this.loadPanel.instance.repaint();
@@ -78,6 +48,5 @@ export class OverlaysComponent implements OnInit, OnDestroy {
 
     ngOnDestroy(): void {
         this.subscription.unsubscribe();
-        clearInterval(this.updateTooltipVisibilityIntervalHandler);
     }
 }