CODEWITHSUNDEEP
reactjstooltipmaterial-ui
ipenguin67
ipenguin67

Reputation: 1649

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

Upvotes: 30

Views: 28931

Answers (5)

Roman
Roman

Reputation: 9441

The cleanest way I found to create an SVG icon that is Tooltip friendly:

import * as React from 'react';
import SvgIcon from '@mui/material/SvgIcon';
import {ReactComponent as PlannerSvg} from './planner.svg';

// Allows functional component to use ref - and thus be allowed inside a tooltip
const PlannerIcon = React.forwardRef((props, ref) => {
  return (
    <SvgIcon {...props}>
      <PlannerSvg />
    </SvgIcon>
  );
});
export default PlannerIcon

I like this implementation because:

  • still functional
  • The .svg itself can be updated without changing code
  • Short and sweet.

Upvotes: 0

Vočko
Vočko

Reputation: 2986

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) => {
    ...
});

Upvotes: 10

Ido
Ido

Reputation: 5758

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

Upvotes: 65

Damian Busz
Damian Busz

Reputation: 1848

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

Upvotes: 0

Charlie
Charlie

Reputation: 160

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

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

Upvotes: -1

Related Questions