diff --git a/.changeset/spotty-pens-stare.md b/.changeset/spotty-pens-stare.md new file mode 100644 index 0000000000..b1e1761cae --- /dev/null +++ b/.changeset/spotty-pens-stare.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/tooltip": patch +--- + +Fix #1840 let Tooltip allow non-ReactElement children diff --git a/packages/components/tooltip/src/tooltip.tsx b/packages/components/tooltip/src/tooltip.tsx index c7678dc5a4..f035e45b6d 100644 --- a/packages/components/tooltip/src/tooltip.tsx +++ b/packages/components/tooltip/src/tooltip.tsx @@ -3,7 +3,7 @@ import {OverlayContainer} from "@react-aria/overlays"; import {AnimatePresence, motion} from "framer-motion"; import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions"; import {warn} from "@nextui-org/shared-utils"; -import {Children, cloneElement} from "react"; +import {Children, cloneElement, isValidElement} from "react"; import {getTransformOrigins} from "@nextui-org/aria-utils"; import {mergeProps} from "@react-aria/utils"; @@ -35,11 +35,19 @@ const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => { /** * Ensure tooltip has only one child node */ - const child = Children.only(children) as React.ReactElement & { - ref?: React.Ref; - }; + const childrenNum = Children.count(children); - trigger = cloneElement(child, getTriggerProps(child.props, child.ref)); + if (childrenNum !== 1) throw new Error(); + + if (!isValidElement(children)) { + trigger =

{children}

; + } else { + const child = children as React.ReactElement & { + ref?: React.Ref; + }; + + trigger = cloneElement(child, getTriggerProps(child.props, child.ref)); + } } catch (error) { trigger = ; warn("Tooltip must have only one child node. Please, check your code.");