fix: Modify the timing of getting position of container in tooltip to… (#2841)

* fix: Modify the timing of getting position of container in tooltip to improve the performance of the style during initialization

* fix: Modify the timing of getting position of container in tooltip to improve the performance of the style during initialization

packages/semi-foundation/tooltip/foundation.ts

@@ -92,7 +92,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         this._mounted = true;
         this._bindEvent();
         this._shouldShow();
-        this._initContainerPosition();
         if (!wrapperId) {
             this._adapter.setId();
         }
@@ -316,6 +315,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     };
 
     show = () => {
+        this._initContainerPosition();
         if (this._adapter.getAnimatingState()) {
             return;
         }
@@ -1134,6 +1134,9 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     }
 
     _initContainerPosition() {
+        if (this._adapter.getContainerPosition() || !this._adapter.containerIsBody()) {
+            return;
+        }
         this._adapter.updateContainerPosition();
     }
 

packages/semi-ui/tooltip/index.tsx

@@ -429,13 +429,21 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             },
             canMotion: () => Boolean(this.props.motion),
             updateContainerPosition: () => {
-                const container = this.getPopupContainer();
-                if (container && isHTMLElement(container)) {
-                    // getComputedStyle need first parameter is Element type
-                    const computedStyle = window.getComputedStyle(container);
-                    const position = computedStyle.getPropertyValue('position');
-                    this.containerPosition = position;
+                const positionInBody = document.body.getAttribute('data-position');
+                if (positionInBody) {
+                    this.containerPosition = positionInBody;
+                    return;
                 }
+                requestAnimationFrame(() => {
+                    const container = this.getPopupContainer();
+                    if (container && isHTMLElement(container)) {
+                        // getComputedStyle need first parameter is Element type
+                        const computedStyle = window.getComputedStyle(container);
+                        const position = computedStyle.getPropertyValue('position');
+                        document.body.setAttribute('data-position', position);
+                        this.containerPosition = position;
+                    }
+                });
             },
             getContainerPosition: () => this.containerPosition,
             getContainer: () => this.containerEl && this.containerEl.current,