fix(core/tooltip): remove arrow if not visible (#451)

siemens · Mar 20, 2023 · 6d02372 · 6d02372
1 parent b9217be
commit 6d02372
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 39 deletions.
diff --git a/packages/core/src/components/tooltip/tooltip.scss b/packages/core/src/components/tooltip/tooltip.scss
@@ -1,13 +1,14 @@
 :host {
   display: inline-block;
-  position: absolute;
+  position: fixed;
   left: 0px;
   top: 0px;
+  z-index: var(--theme-z-index-tooltip);
 
   max-width: 18.25rem;
 
   opacity: 0;
-  visibility: collapse;
+  visibility: collapse !important;
   overflow-wrap: break-word;
 
   border-radius: 0.25rem;
@@ -28,10 +29,10 @@
 
 :host(.visible) {
   opacity: 1;
-  visibility: visible;
+  visibility: visible !important;
 }
 
-:host {
+:host(.visible) {
   .arrow,
   .arrow::before {
     position: absolute;

diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
@@ -8,9 +8,9 @@
  */
 import {
   arrow,
-  autoPlacement,
   autoUpdate,
   computePosition,
+  flip,
   offset,
   shift,
 } from '@floating-ui/dom';
@@ -59,7 +59,7 @@ export class Tooltip {
   }
 
   private destroyAutoUpdate() {
-    if (this.disposeAutoUpdate) {
+    if (this.disposeAutoUpdate !== undefined) {
       this.disposeAutoUpdate();
     }
   }
@@ -82,39 +82,44 @@ export class Tooltip {
       target,
       this.hostElement,
       async () => {
-        const computeResponse = await computePosition(
-          target,
-          this.hostElement,
-          {
-            strategy: 'absolute',
-            placement: 'top',
-            middleware: [
-              shift(),
-              offset(8),
-              arrow({
-                element: this.arrowElement,
-              }),
-              autoPlacement({
-                alignment: 'start',
-                allowedPlacements: ['top', 'bottom', 'right', 'left'],
-              }),
-            ],
+        requestAnimationFrame(async () => {
+          const computeResponse = await computePosition(
+            target,
+            this.hostElement,
+            {
+              strategy: 'fixed',
+              placement: 'top',
+              middleware: [
+                shift(),
+                offset(8),
+                arrow({
+                  element: this.arrowElement,
+                }),
+                flip({
+                  fallbackStrategy: 'initialPlacement',
+                }),
+              ],
+            }
+          );
+
+          if (computeResponse.middlewareData.arrow) {
+            let { x, y } = computeResponse.middlewareData.arrow;
+
+            if (computeResponse.placement === 'bottom') {
+              y = -4;
+            }
+
+            Object.assign(this.arrowElement.style, {
+              left: x != null ? `${x}px` : '',
+              top: y != null ? `${y}px` : '',
+            });
           }
-        );
 
-        if (computeResponse.middlewareData.arrow) {
-          const { x, y } = computeResponse.middlewareData.arrow;
-
-          Object.assign(this.arrowElement.style, {
-            left: x != null ? `${x}px` : '',
-            top: y != null ? `${y}px` : '',
+          const { x, y } = computeResponse;
+          Object.assign(this.hostElement.style, {
+            left: x !== null ? `${x}px` : '',
+            top: y !== null ? `${y}px` : '',
           });
-        }
-
-        const { x, y } = computeResponse;
-        Object.assign(this.hostElement.style, {
-          left: x !== null ? `${x}px` : '',
-          top: y !== null ? `${y}px` : '',
         });
       },
       {

diff --git a/packages/core/src/tests/tooltip/placement-fallback/index.html b/packages/core/src/tests/tooltip/placement-fallback/index.html
@@ -0,0 +1,37 @@
+<!--
+SPDX-FileCopyrightText: 2023 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>
+  </head>
+  <body>
+    <ix-button data-tooltip="Test1">Long text</ix-button>
+    <ix-button data-tooltip="Test2">Short</ix-button>
+    <ix-button data-tooltip="Test3">Long text short words</ix-button>
+
+    <ix-tooltip for='[data-tooltip="Test1"]' title-content="Title content">
+      Very very very very very very looooooooooooooooooooooooooooooooooooooooong
+      text
+    </ix-tooltip>
+    <ix-tooltip for='[data-tooltip="Test2"]' title-content="Title content">
+      <ix-icon slot="title-icon" name="rocket"></ix-icon>
+      Short
+    </ix-tooltip>
+    <ix-tooltip for='[data-tooltip="Test3"]'>
+      <ix-icon slot="title-icon" name="rocket"></ix-icon>
+      <span slot="title-content">Slot based content</span>
+      Very very very very very very long long long text
+    </ix-tooltip>
+
+    <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
@@ -22,7 +22,7 @@ regressionTest.describe('tooltip', () => {
     await page.waitForTimeout(500);
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
-      maxDiffPixelRatio: 0.02,
+      maxDiffPixelRatio: 0.01,
     });
   });
 
@@ -37,7 +37,7 @@ regressionTest.describe('tooltip', () => {
     await page.waitForTimeout(500);
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
-      maxDiffPixelRatio: 0.02,
+      maxDiffPixelRatio: 0.01,
     });
   });
 
@@ -52,7 +52,22 @@ regressionTest.describe('tooltip', () => {
     await page.waitForTimeout(500);
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
-      maxDiffPixelRatio: 0.02,
+      maxDiffPixelRatio: 0.01,
+    });
+  });
+
+  regressionTest('fallback placement', async ({ page }) => {
+    await page.goto('tooltip/placement-fallback');
+
+    const tooltipTriggerHandler = await page.waitForSelector(
+      '[data-tooltip="Test3"]'
+    );
+
+    await tooltipTriggerHandler.hover();
+    await page.waitForTimeout(500);
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      maxDiffPixelRatio: 0.01,
     });
   });
 });
diff --git a/...-snapshots/tooltip-fallback-placement-1-chromium---theme-classic-dark-linux.png b/...-snapshots/tooltip-fallback-placement-1-chromium---theme-classic-dark-linux.png
diff --git a/...snapshots/tooltip-fallback-placement-1-chromium---theme-classic-light-linux.png b/...snapshots/tooltip-fallback-placement-1-chromium---theme-classic-light-linux.png