fix(lib): fix tooltip bot being animatable due to unique parent

p3ol · Apr 28, 2021 · 2c7e9be · 2c7e9be
1 parent 350409c
commit 2c7e9be
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/packages/junipero/lib/Tooltip/index.js b/packages/junipero/lib/Tooltip/index.js
@@ -122,6 +122,13 @@ const Tooltip = forwardRef(({
     return handlers;
   };
 
+  const tooltipInner = (
+    <div className="tooltip-inner">
+      { text }
+      <div ref={setArrowRef} style={styles?.arrow} className="arrow" />
+    </div>
+  );
+
   const tooltip = (
     <div
       className={classNames(
@@ -134,8 +141,10 @@ const Tooltip = forwardRef(({
       { ...attributes?.popper || {} }
       ref={setTooltipRef}
     >
-      { text }
-      <div ref={setArrowRef} style={styles?.arrow} className="arrow" />
+      { animate
+        ? animate(tooltipInner, { opened: state.opened })
+        : tooltipInner
+      }
     </div>
   );
 
@@ -155,11 +164,8 @@ const Tooltip = forwardRef(({
 
       { state.opened || animate || apparition === 'css'
         ? container
-          ? createPortal(
-            animate ? animate(tooltip, { opened: state.opened }) : tooltip,
-            ensureNode(container)
-          )
-          : animate ? animate(tooltip, { opened: state.opened }) : tooltip
+          ? createPortal(tooltip, ensureNode(container))
+          : tooltip
         : null
       }
     </>

diff --git a/packages/junipero/lib/Tooltip/index.styl b/packages/junipero/lib/Tooltip/index.styl
@@ -1,16 +1,18 @@
 @require "../theme/colors"
 
 .junipero.tooltip
-  color: $color-white
-  border-radius: 4px
-  padding: 8px 21px
-  text-align: center
-  pointer-events: none
-  max-width: 250px
-  background: $color-midnight
-
-  .arrow
-    position: absolute
+
+  .tooltip-inner
+    color: $color-white
+    border-radius: 4px
+    padding: 8px 21px
+    text-align: center
+    pointer-events: none
+    max-width: 250px
+    background: $color-midnight
+
+    .arrow
+      position: absolute
 
   &[data-placement*="top"] .arrow,
   &[data-placement*="bottom"] .arrow