fix tooltip in overlay block

DevExpress · Nov 28, 2023 · bb02b09 · bb02b09
1 parent fb882b8
commit bb02b09
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 47 deletions.
diff --git a/src/app/preview/overlays/overlays.component.css b/src/app/preview/overlays/overlays.component.css
@@ -29,7 +29,12 @@
     width: 240px;
 }
 
+:host-context(.dx-theme-fluent-typography) #loadpanel-block {
+    width: 140px;
+}
+
 #tooltip-block {
+    height: auto;
     width: 140px;
 }
 

diff --git a/src/app/preview/overlays/overlays.component.html b/src/app/preview/overlays/overlays.component.html
@@ -7,23 +7,24 @@
         <div id="toast-block">
             <div id="toast-target"></div>
         </div>
-        <div id="tooltip-block">
-            <div id="tooltip-target"></div>
+        <div id="tooltip-block" #tooltipPreviewBlock>
+            <div id="tooltip-preview-target">&nbsp;</div>
         </div>
     </div>
-
-    <dx-tooltip 
-        #tooltip
+    <dx-tooltip
+        #tooltipPreview
         width="100"
-        target="#tooltip-target"
+        target="#tooltip-preview-target"
         container="#tooltip-block"
-        (onHiding)="hiding($event)"
-        position="center"
-        [visible]="true">
-        <p>Tooltip</p>
+        [animation]="null"
+        [visible]="true"
+        [hideOnParentScroll]="false"
+        [position]="{at: 'right', my: 'right'}"
+        [hideOnOutsideClick]="false">
+        <div>Tooltip</div>
     </dx-tooltip>
     <dx-toast
-        #toast 
+        #toast
         message="Info toast"
         width="250"
         minWidth="250"
@@ -34,7 +35,7 @@
         (onContentReady)="toastInit($event)">
     </dx-toast>
     <dx-load-panel
-        #loadPanel 
+        #loadPanel
         [visible]="true"
         [shading]="false"
         (onHiding)="hiding($event)"
@@ -54,65 +55,65 @@
         <div id="target-element"></div>
     </div>
 
-    <dx-popup #popup 
-        title="Popup Title"
-        [closeOnOutsideClick]="true"
-        [showTitle]="true"
-        width="400"
-        height="150"
-        [visible]="false"
-        container="#target-block"
-        [position]="{ of: '#target-element' }">
-    </dx-popup> 
-    <dx-load-panel 
+    <dx-popup #popup
+              title="Popup Title"
+              [closeOnOutsideClick]="true"
+              [showTitle]="true"
+              width="400"
+              height="150"
+              [visible]="false"
+              container="#target-block"
+              [position]="{ of: '#target-element' }">
+    </dx-popup>
+    <dx-load-panel
         [visible]="true"
         [shading]="false"
         (onHiding)="hiding($event)"
         container="#target-block"
         [position]="{ of: ofValue, at: 'center', my: 'center' }">
     </dx-load-panel>
     <dx-action-sheet #actionSheet [dataSource]="actionSheetData" [visible]="false"></dx-action-sheet>
-    <dx-tooltip #tooltip  target="#tooltip-button" position="top" [visible]="false"> 
+    <dx-tooltip #tooltip  target="#tooltip-button" position="top" [visible]="false">
         <div>Tooltip content</div>
     </dx-tooltip>
-    <dx-toast 
-        message="Info toast" 
+    <dx-toast
+        message="Info toast"
         width="310"
         minWidth="310"
-        [position]="{ of: '#target-element', at: 'left top', my:'right bottom' }" 
-        (onHiding)="hiding($event)" 
-        (onContentReady)="toastInit($event)" 
-        type="info" 
+        [position]="{ of: '#target-element', at: 'left top', my:'right bottom' }"
+        (onHiding)="hiding($event)"
+        (onContentReady)="toastInit($event)"
+        type="info"
         [visible]="true">
     </dx-toast>
-    <dx-toast 
-        message="Warning toast" 
+    <dx-toast
+        message="Warning toast"
         width="310"
         minWidth="310"
-        [position]="{ of: '#target-element', at: 'right top', my:'left bottom' }" 
-        (onHiding)="hiding($event)" 
-        (onContentReady)="toastInit($event)" 
-        type="warning" 
+        [position]="{ of: '#target-element', at: 'right top', my:'left bottom' }"
+        (onHiding)="hiding($event)"
+        (onContentReady)="toastInit($event)"
+        type="warning"
         [visible]="true">
     </dx-toast>
-    <dx-toast 
+    <dx-toast
         message="Error toast"
         width="310"
         minWidth="310"
         [position]="{ of: '#target-element', at: 'left bottom', my: 'right top' }"
-        (onHiding)="hiding($event)" 
-        (onContentReady)="toastInit($event)" 
-        type="error" 
+        (onHiding)="hiding($event)"
+        (onContentReady)="toastInit($event)"
+        type="error"
         [visible]="true">
     </dx-toast>
-    <dx-toast 
-        message="Success toast" 
+    <dx-toast
+        message="Success toast"
         width="310"
         minWidth="310"
-        [position]="{ of: '#target-element', at: 'right bottom', my:'left top' }" 
-        (onHiding)="hiding($event)" 
-        (onContentReady)="toastInit($event)" 
-        type="success" 
+        [position]="{ of: '#target-element', at: 'right bottom', my:'left top' }"
+        (onHiding)="hiding($event)"
+        (onContentReady)="toastInit($event)"
+        type="success"
         [visible]="true">
     </dx-toast>
 </ng-template>
diff --git a/src/app/preview/overlays/overlays.component.ts b/src/app/preview/overlays/overlays.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { DxLoadPanelComponent, DxToastComponent, DxTooltipComponent } from 'devextreme-angular';
 import { BehaviorSubject, Subscription } from 'rxjs';
 
@@ -9,7 +9,10 @@ import { BehaviorSubject, Subscription } from 'rxjs';
 })
 export class OverlaysComponent implements OnInit, OnDestroy {
     subscription: Subscription;
+    updateTooltipVisibilityInterval = -1;
 
+    @ViewChild('tooltipPreview') tooltipPreview: DxTooltipComponent;
+    @ViewChild('tooltipPreviewBlock') tooltipPreviewBlock: ElementRef;
     @ViewChild('tooltip') tooltip: DxTooltipComponent;
     @ViewChild('toast') toast: DxToastComponent;
     @ViewChild('loadPanel') loadPanel: DxLoadPanelComponent;
@@ -36,10 +39,35 @@ export class OverlaysComponent implements OnInit, OnDestroy {
         e.cancel = true;
     }
 
+    isElementInViewport(el) {
+        var 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.updateTooltipVisibilityInterval = setInterval(() => {
+            this.updateVisibilityPreviewTooltip();
+        }, 50);
+
         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();
@@ -50,5 +78,6 @@ export class OverlaysComponent implements OnInit, OnDestroy {
 
     ngOnDestroy(): void {
         this.subscription.unsubscribe();
+        clearInterval(this.updateTooltipVisibilityInterval);
     }
 }