Merge branch 'pla-930-migrate-from-abusix-ui-to-hailstorm-tooltip' of h…

…ttps://github.com/abusix/hailstorm into next

src/components/tooltip/tooltip-portal.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+
+interface PortalProps {
+    children: React.ReactNode;
+}
+
+export const TooltipPortal = ({ children }: PortalProps) => {
+    const ref = useRef<Element | null>(null);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        if (document) {
+            ref.current = document.body;
+            setMounted(true);
+        }
+    }, []);
+
+    return mounted && ref.current ? ReactDOM.createPortal(children, ref.current) : null;
+};

src/components/tooltip/tooltip.tsx

@@ -3,6 +3,7 @@ import { Placement } from "@popperjs/core";
 import React, { useEffect, useState } from "react";
 import { usePopper } from "react-popper";
 import { classNames } from "../../util/class-names";
+import { TooltipPortal } from "./tooltip-portal";
 
 interface TooltipProps {
     children: React.ReactNode;
@@ -11,16 +12,25 @@ interface TooltipProps {
     className?: string;
     open?: boolean;
     onClose?: () => void;
+    strategy?: "fixed" | "absolute" | "portal";
 }
 
-export const Tooltip = ({ children, title, position = "right", className, open }: TooltipProps) => {
+export const Tooltip = ({
+    children,
+    title,
+    position = "right",
+    className,
+    open,
+    strategy = "absolute",
+}: TooltipProps) => {
     const [referenceElement, setReferenceElement] = useState<HTMLDivElement>();
     const [popperElement, setPopperElement] = useState<HTMLDivElement>();
     const [show, setShow] = useState(false);
     const [isControlled, setIsControlled] = useState(false);
 
     const { styles, attributes } = usePopper(referenceElement, popperElement, {
         placement: position,
+        strategy: strategy !== "portal" ? strategy : "absolute",
         modifiers: [{ name: "offset", options: { offset: [0, 8] } }],
     });
 
@@ -31,6 +41,30 @@ export const Tooltip = ({ children, title, position = "right", className, open }
         }
     }, [open]);
 
+    const renderTooltipContent = () => (
+        <Transition
+            show={show}
+            enter="transition-opacity duration-75"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity duration-150"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+        >
+            <div
+                ref={(el) => el && setPopperElement(el)}
+                className={classNames(
+                    "rounded-lg bg-neutral-900 p-4 px-4 py-2 text-xs text-neutral-0 shadow",
+                    className
+                )}
+                style={styles.popper}
+                {...attributes.popper}
+            >
+                {title}
+            </div>
+        </Transition>
+    );
+
     return (
         <div>
             <div
@@ -40,27 +74,11 @@ export const Tooltip = ({ children, title, position = "right", className, open }
             >
                 {children}
             </div>
-            <Transition
-                show={show}
-                enter="transition-opacity duration-75"
-                enterFrom="opacity-0"
-                enterTo="opacity-100"
-                leave="transition-opacity duration-150"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-            >
-                <div
-                    ref={(el) => el && setPopperElement(el)}
-                    className={classNames(
-                        "rounded-lg bg-neutral-900 p-4 px-4 py-2 text-xs text-neutral-0 shadow",
-                        className
-                    )}
-                    style={styles.popper}
-                    {...attributes.popper}
-                >
-                    {title}
-                </div>
-            </Transition>
+            {strategy === "portal" ? (
+                <TooltipPortal>{renderTooltipContent()}</TooltipPortal>
+            ) : (
+                renderTooltipContent()
+            )}
         </div>
     );
 };