{"record":{"id":"28b9eea01ea1d20b","repo":"mantinedev/mantine","slug":"mantine-core-tooltip-component-children-should","errorCode":null,"errorMessage":"[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported","messagePattern":"\\[@mantine/core\\] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@mantine/core/src/components/Tooltip/Tooltip.tsx","lineNumber":241,"sourceCode":"\n  const getStyles = useStyles<TooltipFactory>({\n    name: 'Tooltip',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'tooltip',\n    vars,\n    varsResolver,\n  });\n\n  const child = getSingleElementChild(children);\n  if (!target && !child) {\n    throw new Error(\n      '[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const tooltipStyles = getStyles('tooltip');\n  const interactiveMod = interactive && !disabled && !!tooltip.opened;\n  const mergeStyles =\n    arrowPosition === 'merge' && withArrow\n      ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n      : undefined;\n\n  if (target) {\n    const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n    return (\n      <>\n        <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n          <Transition\n            {...transition}","sourceCodeStart":223,"sourceCodeEnd":259,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/components/Tooltip/Tooltip.tsx#L223-L259","documentation":"Tooltip positions itself relative to a single child element and needs a ref on it. getSingleElementChild(children) returns null for fragments, strings, numbers or empty children; since no target prop was provided either, there is no anchor and the component throws.","triggerScenarios":"Tooltip has neither a target prop nor a single element child: children is a string, number, fragment, array, or empty. Rendering nothing while waiting for data also triggers it.","commonSituations":"Wrapping async content that renders null initially, tooltip around mapped fragments, text children from copy-pasted examples, or a ref-less custom component as child.","solutions":["Wrap the child in a DOM element or use a ref-forwarding component","Use the target prop with an existing element/ref when you cannot change children","Guard rendering: only render Tooltip when the content exists"],"exampleFix":"// before\n<Tooltip label=\"tip\">{maybeUndefined}</Tooltip>\n\n// after\n<Tooltip label=\"tip\">{maybeUndefined && <span>{maybeUndefined}</span>}</Tooltip>","handlingStrategy":"validation","validationCode":"// Render Tooltip only when content exists, or use the target prop\n{content && (\n  <Tooltip label=\"tip\"><span>{content}</span></Tooltip>\n)}","typeGuard":"const isValidTooltipChild = (children: React.ReactNode): boolean =>\n  isElement(Array.isArray(children) ? children.find(Boolean) : children);","tryCatchPattern":null,"preventionTips":["Wrap children in a span when content may be primitive","Use the target prop for non-element anchors","Avoid conditional children that can render null"],"tags":["mantine","react","children-validation","ref","tooltip"],"backgroundTag":"react-child-must-forward-ref","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}