Custom Component Tooltip

[thorn arch]

I can not get the tooltip to show on a custom component.

https://codesandbox.io/s/cranky-sky-hwh7uq?file=/src/App.js

This is the codesandbox fom the mantine.dev documentation, am I missing something?

[wintry belfry]

The custom component needs to spread props to the underlying element containing a ref.

const MyBadge = forwardRef(({ color, ...props }, ref) => (
  <div ref={ref} color={color} {...props}>
    Badge
  </div>
));