mantinedev/mantine · error · Error

[@mantine/core] Tooltip component children should be an elem

Error message

[@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

What it means

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.

Source

Thrown at packages/@mantine/core/src/components/Tooltip/Tooltip.tsx:241

  const getStyles = useStyles<TooltipFactory>({
    name: 'Tooltip',
    props,
    classes,
    className,
    style,
    classNames,
    styles,
    unstyled,
    attributes,
    rootSelector: 'tooltip',
    vars,
    varsResolver,
  });

  const child = getSingleElementChild(children);
  if (!target && !child) {
    throw new Error(
      '[@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'
    );
  }

  const tooltipStyles = getStyles('tooltip');
  const interactiveMod = interactive && !disabled && !!tooltip.opened;
  const mergeStyles =
    arrowPosition === 'merge' && withArrow
      ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })
      : undefined;

  if (target) {
    const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });
    return (
      <>
        <OptionalPortal {...portalProps} withinPortal={withinPortal}>
          <Transition
            {...transition}

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Wrap the child in a DOM element or use a ref-forwarding component
2. Use the target prop with an existing element/ref when you cannot change children
3. Guard rendering: only render Tooltip when the content exists

Example fix

// before
<Tooltip label="tip">{maybeUndefined}</Tooltip>

// after
<Tooltip label="tip">{maybeUndefined && <span>{maybeUndefined}</span>}</Tooltip>

// Render Tooltip only when content exists, or use the target prop
{content && (
  <Tooltip label="tip"><span>{content}</span></Tooltip>
)}

const isValidTooltipChild = (children: React.ReactNode): boolean =>
  isElement(Array.isArray(children) ? children.find(Boolean) : children);

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• [@mantine/core] Tooltip.Floating component children should b
• Combobox.DropdownTarget component children should be an elem
• Combobox.EventsTarget component children should be an elemen
• Combobox.Target component children should be an element or a
• ComboboxPopover.Target component children should be an eleme

AI-assisted analysis of mantinedev/mantine@8a284e2c2c (2026-08-28). Data as JSON: /api/errors/28b9eea01ea1d20b. Report an issue: GitHub.