fix: tooltip position #2108

fix: tooltip position #2108

src/admin/components/elements/Tooltip/index.scss

@@ -1,15 +1,13 @@
 @import '../../../scss/styles.scss';
 
-$caretSize: 6;
-
 .tooltip {
+  --caret-size: 6px;
+
   opacity: 0;
 	background-color: var(--theme-elevation-800);
 	position: absolute;
 	z-index: 2;
-	bottom: 100%;
 	left: 50%;
-	transform: translate3d(-50%, calc(#{$caretSize}px * -1), 0);
 	padding: base(.2) base(.4);
 	color: var(--theme-elevation-0);
 	line-height: base(.75);
@@ -22,14 +20,12 @@ $caretSize: 6;
     content: ' ';
     display: block;
     position: absolute;
-    bottom: 0;
     left: 50%;
     transform: translate3d(-50%, 100%, 0);
     width: 0;
     height: 0;
-    border-left: #{$caretSize}px solid transparent;
-    border-right: #{$caretSize}px solid transparent;
-    border-top: #{$caretSize}px solid var(--theme-elevation-800);
+    border-left: var(--caret-size) solid transparent;
+    border-right: var(--caret-size) solid transparent;
   }
 
   &--show {
@@ -39,6 +35,26 @@ $caretSize: 6;
     cursor: default;
   }
 
+  &--position-top {
+    bottom: 100%;
+    transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
+
+    &::after {
+      bottom: 1px;
+      border-top: var(--caret-size) solid var(--theme-elevation-800);
+    }
+  }
+
+  &--position-bottom {
+    top: 100%;
+    transform: translate3d(-50%, var(--caret-size), 0);
+
+    &::after {
+      bottom: calc(100% + var(--caret-size) - 1px);
+      border-bottom: var(--caret-size) solid var(--theme-elevation-800);
+    }
+  }
+
   @include mid-break {
     display: none;
   }

src/admin/components/elements/Tooltip/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { Props } from './types';
+import useIntersect from '../../../hooks/useIntersect';
 
 import './index.scss';
 
@@ -9,9 +10,18 @@ const Tooltip: React.FC<Props> = (props) => {
     children,
     show: showFromProps = true,
     delay = 350,
+    boundingRef,
   } = props;
 
   const [show, setShow] = React.useState(showFromProps);
+  const [position, setPosition] = React.useState<'top' | 'bottom'>('top');
+
+  const [ref, intersectionEntry] = useIntersect({
+    threshold: 0,
+    rootMargin: '-145px 0px 0px 100px',
+    root: boundingRef?.current || null,
+  });
+
 
   useEffect(() => {
     let timerId: NodeJS.Timeout;
@@ -30,16 +40,35 @@ const Tooltip: React.FC<Props> = (props) => {
     };
   }, [showFromProps, delay]);
 
+  useEffect(() => {
+    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom');
+  }, [intersectionEntry]);
+
   return (
-    <aside
-      className={[
-        'tooltip',
-        className,
-        show && 'tooltip--show',
-      ].filter(Boolean).join(' ')}
-    >
-      {children}
-    </aside>
+    <React.Fragment>
+      <aside
+        ref={ref}
+        className={[
+          'tooltip',
+          className,
+          'tooltip--position-top',
+        ].filter(Boolean).join(' ')}
+        aria-hidden="true"
+      >
+        {children}
+      </aside>
+
+      <aside
+        className={[
+          'tooltip',
+          className,
+          show && 'tooltip--show',
+          `tooltip--position-${position}`,
+        ].filter(Boolean).join(' ')}
+      >
+        {children}
+      </aside>
+    </React.Fragment>
   );
 };
 

src/admin/components/elements/Tooltip/types.ts

@@ -3,4 +3,5 @@ export type Props = {
   children: React.ReactNode
   show?: boolean
   delay?: number
+  boundingRef?: React.RefObject<HTMLElement>
 }