I created a Custom Button that wraps a MUI Button in order to select default props and such. Below is a simplified example of what I created, but the issue still exists.

Below is the code and here is a codesandbox link: =/Button.js

const Button = React.forwardRef((props, ref) => (
  <MuiButton ref={ref}>{props.children}</MuiButton>
));

<Tooltip title="I can hover" placement="top">
  <Button>Custom Button</Button>
</Tooltip>

According to the Tooltip docs at , I should make sure that the child can hold a ref, so I have wrapped it in the React.forwardRef function and passed the ref to the Material UI Button ponent that it is returning, but the tooltip still isn't working.

Any ideas what I'm missing?

I created a Custom Button that wraps a MUI Button in order to select default props and such. Below is a simplified example of what I created, but the issue still exists.

Below is the code and here is a codesandbox link: https://codesandbox.io/s/material-ui-button-forwardref-tooltip-hover-problem-entv2?file=/Button.js

const Button = React.forwardRef((props, ref) => (
  <MuiButton ref={ref}>{props.children}</MuiButton>
));

<Tooltip title="I can hover" placement="top">
  <Button>Custom Button</Button>
</Tooltip>

According to the Tooltip docs at https://material-ui./api/tooltip/#props, I should make sure that the child can hold a ref, so I have wrapped it in the React.forwardRef function and passed the ref to the Material UI Button ponent that it is returning, but the tooltip still isn't working.

Any ideas what I'm missing?

• javascript
• reactjs
• material-ui

Share Improve this question Follow asked Apr 9, 2020 at 5:46 zeckdudezeckdude 16.2k4444 gold badges148148 silver badges194194 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I figured out the solution, so instead of closing the question, I'll leave what I did. So I forgot to spread the props object to the wrapped MUI button and apparently the Tooltip is passing something to the Button that is important to make the hover work. Likely it is the onMouseOver, onMouseLeave, onFocus, onBlur, onTouchStart, and onTouchEnd props that are the issue.

const Button = React.forwardRef((props, ref) => (
  <MuiButton ref={ref} {...props}>
    {props.children}
  </MuiButton>
));