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:

  1. Surround PlannerIcon with div as a parent element (div can hold a ref):

    <Tooltip text="Planner">
      <div>
       <PlannerIcon />
      </div>
    </Tooltip>
    
  2. 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>
        )
      }
    };