feat: tooltip: adds portal prop to tooltips (#179)

EightfoldAI · Jun 14, 2022 · e48479a · e48479a
1 parent d8de579
commit e48479a
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 168 deletions.
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     },
     "dependencies": {
         "@floating-ui/react-dom": "0.6.0",
+        "@floating-ui/react-dom-interactions": "0.6.3",
         "@mdi/react": "1.5.0",
         "bodymovin": "4.13.0",
         "lottie-web": "5.8.1",

diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
@@ -5252,6 +5252,7 @@ exports[`Storyshots Input Search Box 1`] = `
       >
         <div
           className="referenceWrapper"
+          id="4fzzzxj"
           onBlur={[Function]}
           onFocus={[Function]}
           onMouseEnter={[Function]}
@@ -5290,32 +5291,6 @@ exports[`Storyshots Input Search Box 1`] = `
             </span>
           </button>
         </div>
-        <div
-          aria-hidden={true}
-          className="tooltip top"
-          role="tooltip"
-          style={
-            Object {
-              "left": "",
-              "position": "absolute",
-              "top": "",
-            }
-          }
-          tabIndex={0}
-        >
-          tooltip
-          <div
-            className="arrow"
-            style={
-              Object {
-                "bottom": "-4px",
-                "left": "",
-                "position": "absolute",
-                "top": "",
-              }
-            }
-          />
-        </div>
       </span>
     </div>
     <input
@@ -5418,6 +5393,7 @@ exports[`Storyshots Input Text Area 1`] = `
     >
       <div
         className="referenceWrapper"
+        id="4fzzzxj"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseEnter={[Function]}
@@ -5456,32 +5432,6 @@ exports[`Storyshots Input Text Area 1`] = `
           </span>
         </button>
       </div>
-      <div
-        aria-hidden={true}
-        className="tooltip top"
-        role="tooltip"
-        style={
-          Object {
-            "left": "",
-            "position": "absolute",
-            "top": "",
-          }
-        }
-        tabIndex={0}
-      >
-        tooltip
-        <div
-          className="arrow"
-          style={
-            Object {
-              "bottom": "-4px",
-              "left": "",
-              "position": "absolute",
-              "top": "",
-            }
-          }
-        />
-      </div>
     </span>
   </div>
   <textarea
@@ -5548,6 +5498,7 @@ exports[`Storyshots Input Text Input 1`] = `
     >
       <div
         className="referenceWrapper"
+        id="4fzzzxj"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseEnter={[Function]}
@@ -5586,32 +5537,6 @@ exports[`Storyshots Input Text Input 1`] = `
           </span>
         </button>
       </div>
-      <div
-        aria-hidden={true}
-        className="tooltip top"
-        role="tooltip"
-        style={
-          Object {
-            "left": "",
-            "position": "absolute",
-            "top": "",
-          }
-        }
-        tabIndex={0}
-      >
-        tooltip
-        <div
-          className="arrow"
-          style={
-            Object {
-              "bottom": "-4px",
-              "left": "",
-              "position": "absolute",
-              "top": "",
-            }
-          }
-        />
-      </div>
     </span>
   </div>
   <input
@@ -5712,6 +5637,7 @@ exports[`Storyshots Label Labels 1`] = `
   >
     <div
       className="referenceWrapper"
+      id="4fzzzxj"
       onBlur={[Function]}
       onFocus={[Function]}
       onMouseEnter={[Function]}
@@ -5751,31 +5677,6 @@ exports[`Storyshots Label Labels 1`] = `
         </span>
       </button>
     </div>
-    <div
-      aria-hidden={true}
-      className="tooltip right"
-      role="tooltip"
-      style={
-        Object {
-          "left": "",
-          "position": "absolute",
-          "top": "",
-        }
-      }
-      tabIndex={0}
-    >
-      A tooltip
-      <div
-        className="arrow"
-        style={
-          Object {
-            "left": "-4px",
-            "position": "absolute",
-            "top": "",
-          }
-        }
-      />
-    </div>
   </span>
 </div>
 `;
@@ -11247,52 +11148,26 @@ exports[`Storyshots Tabs With Badge 1`] = `
 `;
 
 exports[`Storyshots Tooltip Tooltips 1`] = `
-Array [
-  <div
-    className="referenceWrapper"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+<div
+  className="referenceWrapper"
+  id="4fzzzxj"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <button
+    aria-disabled={false}
+    aria-label="Show Tooltip"
+    className="button buttonPrimary buttonSize2"
+    defaultChecked={false}
+    disabled={false}
   >
-    <button
-      aria-disabled={false}
-      aria-label="Show Tooltip"
-      className="button buttonPrimary buttonSize2"
-      defaultChecked={false}
-      disabled={false}
+    <span
+      className="buttonText2"
     >
-      <span
-        className="buttonText2"
-      >
-        Show Tooltip
-      </span>
-    </button>
-  </div>,
-  <div
-    aria-hidden={true}
-    className="my-tooltip-class tooltip bottom"
-    role="tooltip"
-    style={
-      Object {
-        "left": "",
-        "position": "absolute",
-        "top": "",
-      }
-    }
-    tabIndex={0}
-  >
-    This is a Tooltip.
-    <div
-      className="arrow"
-      style={
-        Object {
-          "left": "",
-          "position": "absolute",
-          "top": "-4px",
-        }
-      }
-    />
-  </div>,
-]
+      Show Tooltip
+    </span>
+  </button>
+</div>
 `;
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -120,6 +120,10 @@ export default {
             options: ['light', 'dark'],
             control: { type: 'inline-radio' },
         },
+        portal: {
+            options: [true, false],
+            control: { type: 'inline-radio' },
+        },
     },
 } as ComponentMeta<typeof Tooltip>;
 
@@ -141,6 +145,7 @@ Tooltips.args = {
     hideAfter: 0,
     tabIndex: 0,
     positionStrategy: 'absolute',
+    portal: false,
     children: (
         <>
             <PrimaryButton

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -6,8 +6,13 @@ import {
     arrow,
     offset as fOffset,
 } from '@floating-ui/react-dom';
+import { FloatingPortal } from '@floating-ui/react-dom-interactions';
 import { TooltipProps, TooltipTheme } from './Tooltip.types';
-import { mergeClasses } from '../../shared/utilities';
+import {
+    ConditionalWrapper,
+    generateId,
+    mergeClasses,
+} from '../../shared/utilities';
 
 import styles from './tooltip.module.scss';
 
@@ -19,7 +24,9 @@ export const Tooltip: FC<TooltipProps> = ({
     theme,
     content,
     placement = 'bottom',
+    portal = false,
     disabled,
+    id,
     visibleArrow = true,
     classNames,
     openDelay = 0,
@@ -31,6 +38,7 @@ export const Tooltip: FC<TooltipProps> = ({
     const tooltipSide: string = placement.split('-')?.[0];
     const [visible, setVisible] = useState<boolean>(false);
     const arrowRef = useRef<HTMLDivElement>(null);
+    const tooltipId = useRef<string>(id || generateId());
     let timeout: ReturnType<typeof setTimeout>;
 
     const {
@@ -119,33 +127,43 @@ export const Tooltip: FC<TooltipProps> = ({
     return (
         <>
             <div
+                className={referenceWrapperClasses}
+                id={tooltipId.current}
                 onMouseEnter={toggle(true)}
                 onFocus={toggle(true)}
                 onBlur={toggle(false)}
                 onMouseLeave={toggle(false)}
                 ref={reference}
-                className={referenceWrapperClasses}
             >
                 {children}
             </div>
-            <div
-                {...rest}
-                role="tooltip"
-                aria-hidden={!visible}
-                ref={floating}
-                style={tooltipStyle}
-                className={tooltipClasses}
-                tabIndex={tabIndex}
+            <ConditionalWrapper
+                condition={portal}
+                wrapper={(children) => (
+                    <FloatingPortal>{children}</FloatingPortal>
+                )}
             >
-                {content}
-                {visibleArrow && (
+                {visible && (
                     <div
-                        ref={arrowRef}
-                        style={arrowStyle}
-                        className={styles.arrow}
-                    />
+                        {...rest}
+                        role="tooltip"
+                        aria-hidden={!visible}
+                        ref={floating}
+                        style={tooltipStyle}
+                        className={tooltipClasses}
+                        tabIndex={tabIndex}
+                    >
+                        {content}
+                        {visibleArrow && (
+                            <div
+                                ref={arrowRef}
+                                style={arrowStyle}
+                                className={styles.arrow}
+                            />
+                        )}
+                    </div>
                 )}
-            </div>
+            </ConditionalWrapper>
         </>
     );
 };
diff --git a/src/components/Tooltip/Tooltip.types.ts b/src/components/Tooltip/Tooltip.types.ts
@@ -22,6 +22,11 @@ export interface TooltipProps extends OcBaseProps<HTMLDivElement> {
      * @default bottom
      */
     placement?: Placement;
+    /**
+     * If the tooltip is portaled
+     * @default false
+     */
+    portal?: boolean;
     /**
      * To disable the tooltip
      * @default false