fix: render passed children in tooltip parent

abusix · Sep 25, 2024 · 55f96d6 · 55f96d6
1 parent dc626b1
commit 55f96d6
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
@@ -6,7 +6,7 @@ import { classNames } from "../../util/class-names";
 import { TooltipPortal } from "./tooltip-portal";
 
 interface TooltipProps {
-    children: React.ReactNode;
+    children: React.ReactElement;
     title: React.ReactNode;
     position?: Placement;
     className?: string;
@@ -34,6 +34,12 @@ export const Tooltip = ({
         modifiers: [{ name: "offset", options: { offset: [0, 8] } }],
     });
 
+    const childrenWithRef = React.cloneElement(children, {
+        ref: (el: HTMLDivElement) => setReferenceElement(el),
+        onMouseEnter: () => !isControlled && setShow(true),
+        onMouseLeave: () => !isControlled && setShow(false),
+    });
+
     useEffect(() => {
         if (open !== undefined) {
             setIsControlled(true);
@@ -67,13 +73,7 @@ export const Tooltip = ({
 
     return (
         <>
-            <div
-                ref={(el) => el && setReferenceElement(el)}
-                onMouseEnter={() => !isControlled && setShow(true)}
-                onMouseLeave={() => !isControlled && setShow(false)}
-            >
-                {children}
-            </div>
+            {childrenWithRef}
             {strategy === "portal" ? (
                 <TooltipPortal>{renderTooltipContent()}</TooltipPortal>
             ) : (