From 55f96d6ebd5d3c4d1cc5a554103d61e7ae9d339e Mon Sep 17 00:00:00 2001
From: mnlfischer <manuel.fischer@abusix.com>
Date: Wed, 25 Sep 2024 11:05:16 +0200
Subject: [PATCH] fix: render passed children in tooltip parent

---
 src/components/tooltip/tooltip.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index 2b72a679..423e5245 100644
--- 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>
             ) : (