fix(core/tooltip): positioning initial (#1036)

Co-authored-by: Demirci <ridvan.demirci@siemens.com>
siemens · Jan 10, 2024 · 9ba9823 · 9ba9823
1 parent 84cce07
commit 9ba9823
Showing 1 changed file with 47 additions and 42 deletions.
diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
@@ -108,8 +108,8 @@ export class Tooltip {
   @Method()
   async showTooltip(anchorElement: any) {
     clearTimeout(this.hideTooltipTimeout);
+    await this.computeTooltipPosition(anchorElement);
     this.visible = true;
-    this.computeTooltipPosition(anchorElement);
   }
 
   /** @internal */
@@ -160,50 +160,55 @@ export class Tooltip {
     if (!target) {
       return;
     }
-    this.disposeAutoUpdate = autoUpdate(
-      target,
-      this.hostElement,
-      async () => {
-        setTimeout(async () => {
-          const computeResponse = await computePosition(
-            target,
-            this.hostElement,
-            {
-              strategy: 'fixed',
-              placement: this.placement,
-              middleware: [
-                shift(),
-                offset(8),
-                arrow({
-                  element: this.arrowElement,
-                }),
-                flip({
-                  fallbackStrategy: 'initialPlacement',
-                  padding: 10,
-                }),
-              ],
+
+    return new Promise<void>((resolve) => {
+      this.disposeAutoUpdate = autoUpdate(
+        target,
+        this.hostElement,
+        async () => {
+          setTimeout(async () => {
+            const computeResponse = await computePosition(
+              target,
+              this.hostElement,
+              {
+                strategy: 'fixed',
+                placement: this.placement,
+                middleware: [
+                  shift(),
+                  offset(8),
+                  arrow({
+                    element: this.arrowElement,
+                  }),
+                  flip({
+                    fallbackStrategy: 'initialPlacement',
+                    padding: 10,
+                  }),
+                ],
+              }
+            );
+
+            if (computeResponse.middlewareData.arrow) {
+              const arrowPosition = this.computeArrowPosition(computeResponse);
+              Object.assign(this.arrowElement.style, arrowPosition);
             }
-          );
 
-          if (computeResponse.middlewareData.arrow) {
-            const arrowPosition = this.computeArrowPosition(computeResponse);
-            Object.assign(this.arrowElement.style, arrowPosition);
-          }
+            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` : '',
+            resolve();
           });
-        });
-      },
-      {
-        ancestorResize: true,
-        ancestorScroll: true,
-        elementResize: true,
-        animationFrame: this.animationFrame,
-      }
-    );
+        },
+        {
+          ancestorResize: true,
+          ancestorScroll: true,
+          elementResize: true,
+          animationFrame: this.animationFrame,
+        }
+      );
+    });
   }
 
   private clearHideTimeout() {
@@ -219,7 +224,7 @@ export class Tooltip {
   private updateAriaDescribedBy(element: Element, describedBy: string) {
     const oldDescribedBy = element.getAttribute('aria-describedby');
 
-    if (oldDescribedBy.indexOf(describedBy) != -1) {
+    if (oldDescribedBy?.indexOf(describedBy) != -1) {
       return;
     }