Fix display tooltip on overlay block (#206)

* Redesign header, footer, favicon (#196) * fix tooltip in overlay block + alignment
DevExpress · Dec 8, 2023 · f61886b · f61886b
1 parent 1193b7c
commit f61886b
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 39 deletions.
diff --git a/src/app/preview/overlays/overlays.component.css b/src/app/preview/overlays/overlays.component.css
@@ -25,11 +25,24 @@
     width: 250px;
 }
 
+#tooltip-block  {
+    position: relative;
+}
+
+#tooltip-block::ng-deep  .dx-tooltip-wrapper {
+    position: initial !important;
+}
+
 #loadpanel-block {
     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
@@ -8,22 +8,23 @@
             <div id="toast-target"></div>
         </div>
         <div id="tooltip-block">
-            <div id="tooltip-target"></div>
+            <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,7 +55,7 @@
         <div id="target-element"></div>
     </div>
 
-    <dx-popup #popup 
+    <dx-popup #popup
         title="Popup Title"
         [closeOnOutsideClick]="true"
         [showTitle]="true"
@@ -63,56 +64,56 @@
         [visible]="false"
         container="#target-block"
         [position]="{ of: '#target-element' }">
-    </dx-popup> 
-    <dx-load-panel 
+    </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
@@ -16,8 +16,6 @@ export class OverlaysComponent implements OnInit, OnDestroy {
 
     widgetGroup = 'overlays';
     isExpanded = new BehaviorSubject<boolean>(false);
-    isExpandedValue = false;
-
     ofValue = '#loadpanel-target';
 
     actionSheetData: any[] = [