fix: apply fixed positioning to hidden tooltip (#716)

.storybook/style.scss

@@ -14,6 +14,10 @@ html {
   background: #1a1b20;
 }
 
+.echInvisible {
+  visibility: hidden;
+}
+
 #story-root {
   padding: 20px;
   width: 100%;

integration/page_objects/common.ts

@@ -157,7 +157,7 @@ class CommonPage {
   async toggleElementVisibility(selector: string) {
     await page.$$eval(selector, (elements) => {
       elements.forEach((element) => {
-        element.classList.toggle('invisible');
+        element.classList.toggle('echInvisible');
       });
     });
   }

src/components/_global.scss

@@ -1,7 +1,3 @@
-.invisible {
-  visibility: hidden;
-}
-
 .echChartStatus {
   visibility: hidden;
   pointer-events: none;

src/components/portal/_portal.scss

@@ -7,3 +7,8 @@
   position: absolute;
   pointer-events: none;
 }
+
+.echTooltipPortal__invisible {
+  position: fixed;
+  visibility: hidden;
+}

src/components/portal/tooltip_portal.tsx

@@ -199,7 +199,12 @@ const TooltipPortalComponent = ({ anchor, scope, settings, children, visible, ch
     }
   }, [updateAnchorDimensions, popper]);
 
-  return createPortal(<div className={classNames({ invisible })}>{children}</div>, portalNode.current);
+  return createPortal(
+    <div className={classNames({ echTooltipPortal__invisible: invisible })}>
+      {children}
+    </div>,
+    portalNode.current,
+  );
 };
 
 TooltipPortalComponent.displayName = 'TooltipPortal';