fix(core/tooltip): cutoff near viewport edges (#1462)

siemens · Sep 11, 2024 · 501cce5 · 501cce5
1 parent 07653dc
commit 501cce5
Show file tree

Hide file tree

Showing 16 changed files with 145 additions and 22 deletions.
diff --git a/.changeset/fast-tips-jam.md b/.changeset/fast-tips-jam.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/tooltip): cutoff near viewport edges
diff --git a/packages/angular-test-app/src/preview-examples/modal-sizes.html b/packages/angular-test-app/src/preview-examples/modal-sizes.html
@@ -20,7 +20,24 @@
 </div>
 
 <ng-template #customModal let-modal>
-  <ix-button (click)="modal.dismiss('dismiss')"
-    >Modal with size {{ modal.data }}</ix-button
-  >
+  <div style="display: flex; margin-top: 60px; margin-bottom: 60px">
+    <input checked id="checkbox_1_1" name="group_1" type="checkbox" />
+    <label for="checkbox_1_1">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptuad. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet.</label
+    >
+    <div id="test">
+      <ix-icon size="24" name="name" name="info"></ix-icon>
+    </div>
+    <ix-tooltip style="align-self: flex-start" for="#test"
+    >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet.
+    </ix-tooltip>
+  </div>
 </ng-template>
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -44,7 +44,7 @@
     "pkg": "pnpm pack"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.1",
+    "@floating-ui/dom": "^1.6.10",
     "@stencil/core": "~4.17.0",
     "@types/luxon": "^3.3.7",
     "animejs": "~3.2.1",

diff --git a/packages/core/src/components/tooltip/tooltip.scss b/packages/core/src/components/tooltip/tooltip.scss
@@ -1,11 +1,12 @@
 :host {
   display: inline-block;
   position: fixed;
-  left: 0px;
-  top: 0px;
+  left: 0;
+  top: 0;
   z-index: var(--theme-z-index-tooltip);
 
   max-width: 18.25rem;
+  width: max-content;
 
   opacity: 0;
   visibility: collapse !important;
@@ -25,14 +26,14 @@
   .tooltip-container {
     display: block;
     position: relative;
-    width: auto;
+    width:  auto;
     height: 100%;
     background: var(--theme-tootlip--background);
     color: var(--theme-color-std-text);
     padding: 0.375rem 0.75rem 0.375rem 0.875rem;
 
     box-shadow: var(--theme-shadow-4);
-
+    border-radius: inherit;
   }
 }
 

diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
@@ -135,30 +135,40 @@ export class Tooltip implements IxOverlayComponent {
     middlewareData,
   }: ComputePositionReturn): ArrowPosition {
     let { x, y } = middlewareData.arrow;
+    const resetPosition = {
+      top: 'unset',
+      right: 'unset',
+      bottom: 'unset',
+      left: 'unset',
+    };
 
     if (placement.startsWith('top')) {
       return {
+        ...resetPosition,
         left: numberToPixel(x),
         top: numberToPixel(y),
       };
     }
 
     if (placement.startsWith('right')) {
       return {
+        ...resetPosition,
         left: numberToPixel(-6),
         top: numberToPixel(y),
       };
     }
 
     if (placement.startsWith('bottom')) {
       return {
+        ...resetPosition,
         left: numberToPixel(x),
         top: numberToPixel(-6),
       };
     }
 
     if (placement.startsWith('left')) {
       return {
+        ...resetPosition,
         right: numberToPixel(-6),
         top: numberToPixel(y),
       };
@@ -177,6 +187,7 @@ export class Tooltip implements IxOverlayComponent {
         }),
         flip({
           fallbackStrategy: 'initialPlacement',
+          fallbackAxisSideDirection: 'end',
           padding: 10,
         }),
         hide(),

diff --git a/packages/core/src/tests/tooltip/placement-on-edge/index.html b/packages/core/src/tests/tooltip/placement-on-edge/index.html
@@ -0,0 +1,67 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+    <style>
+      .full-size {
+        height: 100vh;
+        width: 100vw;
+      }
+      .box {
+        padding: 2rem;
+        position: absolute;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="full-size">
+      <div class="box" style="top: 0; right:0">
+        <ix-button variant="primary" data-tooltip="myTooltip-top">
+          Tooltip-position-initial-top
+        </ix-button>
+        <ix-tooltip placement="top" for="[data-tooltip='myTooltip-top']">
+          Some example content
+        </ix-tooltip>
+      </div>
+
+      <div class="box" style="top: 0; left:0">
+        <ix-button variant="primary" data-tooltip="myTooltip-left">
+          Tooltip-position-initial-left
+        </ix-button>
+        <ix-tooltip placement="left" for="[data-tooltip='myTooltip-left']">
+          Some example content
+        </ix-tooltip>
+      </div>
+
+      <div class="box" style="bottom: 0; left:0">
+        <ix-button variant="primary" data-tooltip="myTooltip-bottom">
+          Tooltip-position-bottom
+        </ix-button>
+        <ix-tooltip placement="bottom" for="[data-tooltip='myTooltip-bottom']">
+          Some example content
+        </ix-tooltip>
+      </div>
+
+      <div class="box" style="bottom: 0; right:0">
+        <ix-button variant="primary" data-tooltip="myTooltip-right">
+          Tooltip-position-initial-right
+        </ix-button>
+        <ix-tooltip placement="right" for="[data-tooltip='myTooltip-right']">
+          Some example content
+        </ix-tooltip>
+      </div>
+    </div>
+
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts b/packages/core/src/tests/tooltip/tooltip.e2e.ts
@@ -71,6 +71,28 @@ regressionTest.describe('tooltip', () => {
     });
   });
 
+  regressionTest('placement near viewport edge', async ({ page }) => {
+    await page.goto('tooltip/placement-on-edge');
+
+    const tooltips = [
+      'myTooltip-left',
+      'myTooltip-right',
+      'myTooltip-top',
+      'myTooltip-bottom',
+    ];
+
+    for (const tooltip of tooltips) {
+      const tooltipTriggerHandler = await page.waitForSelector(
+        `[data-tooltip="${tooltip}"]`
+      );
+
+      await tooltipTriggerHandler.hover();
+      await page.waitForTimeout(500);
+
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    }
+  });
+
   regressionTest('global style not bleeding into tooltip', async ({ page }) => {
     await page.goto('tooltip/overlapping-styles');
 

diff --git a/.../tooltip-placement-near-viewport-edge-1-chromium---theme-classic-dark-linux.png b/.../tooltip-placement-near-viewport-edge-1-chromium---theme-classic-dark-linux.png
diff --git a/...tooltip-placement-near-viewport-edge-1-chromium---theme-classic-light-linux.png b/...tooltip-placement-near-viewport-edge-1-chromium---theme-classic-light-linux.png
diff --git a/.../tooltip-placement-near-viewport-edge-2-chromium---theme-classic-dark-linux.png b/.../tooltip-placement-near-viewport-edge-2-chromium---theme-classic-dark-linux.png
diff --git a/...tooltip-placement-near-viewport-edge-2-chromium---theme-classic-light-linux.png b/...tooltip-placement-near-viewport-edge-2-chromium---theme-classic-light-linux.png
diff --git a/.../tooltip-placement-near-viewport-edge-3-chromium---theme-classic-dark-linux.png b/.../tooltip-placement-near-viewport-edge-3-chromium---theme-classic-dark-linux.png
diff --git a/...tooltip-placement-near-viewport-edge-3-chromium---theme-classic-light-linux.png b/...tooltip-placement-near-viewport-edge-3-chromium---theme-classic-light-linux.png
diff --git a/.../tooltip-placement-near-viewport-edge-4-chromium---theme-classic-dark-linux.png b/.../tooltip-placement-near-viewport-edge-4-chromium---theme-classic-dark-linux.png
diff --git a/...tooltip-placement-near-viewport-edge-4-chromium---theme-classic-light-linux.png b/...tooltip-placement-near-viewport-edge-4-chromium---theme-classic-light-linux.png
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml