mantinedev/mantine · error · Error

[@mantine/core] Tooltip.Floating component children should b

Error message

[@mantine/core] Tooltip.Floating 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.Floating follows the cursor by attaching refs/handlers to its single child. getSingleElementChild returns null for fragments, primitives or empty children, leaving no element to track, so it throws during render.

Source

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

    style,
    classNames,
    styles,
    unstyled,
    attributes,
    rootSelector: 'tooltip',
    vars,
    varsResolver,
  });

  const { handleMouseMove, x, y, opened, boundaryRef, floating, setOpened } = useFloatingTooltip({
    offset,
    position,
    defaultOpened,
  });

  const child = getSingleElementChild(children);
  if (!child) {
    throw new Error(
      '[@mantine/core] Tooltip.Floating component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'
    );
  }

  const targetRef = useMergedRef(boundaryRef, getRefProp(child), ref);
  const childProps = child.props as any;

  const onMouseEnter = (event: React.MouseEvent<unknown, MouseEvent>) => {
    childProps.onMouseEnter?.(event);
    handleMouseMove(event);
    setOpened(true);
  };

  const onMouseLeave = (event: React.MouseEvent<unknown, MouseEvent>) => {
    childProps.onMouseLeave?.(event);
    setOpened(false);
  };

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Provide a single element child that accepts refs
2. Wrap primitives in a span/button
3. Add forwardRef to custom child components

Example fix

// before
<Tooltip.Floating>info</Tooltip.Floating>

// after
<Tooltip.Floating><Button>info</Button></Tooltip.Floating>

// Ensure a single element child before rendering Tooltip.Floating

const isValidTargetChild = (c: React.ReactNode): boolean => isElement(c);

When it happens

Trigger: Child of Tooltip.Floating is a string/number, fragment, multiple children, or a component that doesn't forward refs.

Common situations: Using text directly as the floating-tooltip trigger, or a custom component that lacks ref forwarding.

Related errors

• [@mantine/core] Tooltip component children should be an elem
• 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/9444fa3e910cd0c6. Report an issue: GitHub.