Material UI tooltip doesn't display on custom component, despite spreading props to that component

Question

I am having difficulties making the Material UI tooltip actually appear when hovering over a component. As far as I can tell, I am doing about the simplest implementation of the tooltip component: I import it directly (no custom styles or anything else yet), and I wrap it around another component that spreads out its props at the top level.

From reading the documentation it should be that simple, but it is not appearing on hover, and in the React DevTools I see that the anchorEl prop of is undefined.

import Tooltip from '@material-ui/core/Tooltip';

const containerComponent = () => (
    <Tooltip text="Planner"><PlannerIcon /></Tooltip>
)

PlannerIcon.js

const PlannerIcon = (props) => (
  <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>
  );

Answer 1

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>
       )
     }
   };
   

Answer 2

There is no need for the div workaround or turning your functional component into a class one. You can use forwardRef instead and it will work too:

const PlannerIcon = React.forwardRef((props, ref) => (
  <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
    {...props}
    ref={ref}
  >
    <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>
  ));

I'm not sure what the Icon component is about, you might need to turn it into an <svg> tag.

If anyone is using typescript, the syntax is a little confusing, the first type is the one for the ref and second for the props (don't ask me why):

const PlannerIcon = React.forwardRef<SVGSVGElement | null, IPlannerIconProps>((props, ref) => {
    ...
});