fix tooltip in overlay block

+ alignment
DevExpress · Dec 7, 2023 · 7f95425 · 7f95425
1 parent 1685914
commit 7f95425
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 32 deletions.
diff --git 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
@@ -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
@@ -2,19 +2,14 @@ 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',
     styleUrls: ['./overlays.component.css']
 })
 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);
     }
 }