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

问题

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

回答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:

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

回答2:

I believe you need title="Planner" not text="Planner".

<Tooltip title="Planner"><PlannerIcon /></Tooltip>

回答3:

I know this might be weird to ask but perhaps try to import svg icon as component, since react 16.4(not sure right now) you can import svgs as components.

import { ReactComponent as YourName} from './assets/yourfile.svg';

then you could simply do this:

const PlannerIcon = (props) => (
  <YourName {...props}/>
  );

let me know if you tried and if it helped.

@edit I do not see in their documentation any prop called text, perhaps you mean title? Tooltip api

来源：https://stackoverflow.com/questions/57527896/material-ui-tooltip-doesnt-display-on-custom-component-despite-spreading-props

标签

reactjs

tooltip

material-ui