Material UI tooltip doesn't display on custom component, despite spreading props to that component
Your Tooltip is not working properly because the child of a Material-UI Tooltip must be able to hold a ref.
The following can hold a ref:
- Any Material-UI component
- class components i.e. React.Component or React.PureComponent
- DOM (or host) components e.g. div or button
- React.forwardRef components
- React.lazy components
- React.memo components
PlannerIcon is not any of the above, it's a function component. I'll suggest Two solutions for the problem:
Surround PlannerIcon with div as a parent element (div can hold a ref):
<Tooltip text="Planner"> <div> <PlannerIcon /> </div> </Tooltip>
Convert PlannerIcon into a class component:
class PlannerIcon extends React.Component { render(){ return( <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" {...props} > <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/> <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/> <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/> </Icon> ) } };