Material UI tooltip doesn't display on custom component, despite

ghz 6months ago ⋅ 75 views

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

Answers

The issue you're encountering with the Material-UI Tooltip not appearing on hover is likely due to incorrect usage of the Tooltip component and its props. Let's correct and enhance your implementation to make sure the Tooltip works properly:

Step-by-Step Solution

1. Correct Usage of Tooltip Component

The Tooltip component in Material-UI requires the following props to work correctly:

  • title: The text or element that will be displayed inside the tooltip.
  • children: The component or element that will trigger the tooltip to appear on hover.

Here's how you should structure your components:

ContainerComponent.js

import React from 'react';
import Tooltip from '@material-ui/core/Tooltip';
import PlannerIcon from './PlannerIcon'; // Import your PlannerIcon component

const ContainerComponent = () => (
  <Tooltip title="Planner">
    <PlannerIcon />
  </Tooltip>
);

export default ContainerComponent;

PlannerIcon.js

Make sure your PlannerIcon component correctly accepts and spreads its props. If it's a functional component, props should be spread on the top-level SVG element or component.

import React from 'react';
import Icon from '@material-ui/core/Icon'; // Make sure to import Icon from Material-UI

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

export default PlannerIcon;

Notes on Props and Usage

  • Props in Tooltip: The Tooltip component in Material-UI uses title for the tooltip content and children for the component that triggers the tooltip.
  • Props Spreading: Ensure that if you pass props to PlannerIcon, they are spread correctly onto the top-level element (Icon in this case).

Additional Tips

  • Import Correct Components: Make sure you import components (Icon, Tooltip, etc.) from Material-UI correctly.
  • Check for Errors: Use browser developer tools (console and React DevTools) to check for any errors or warnings related to props or component rendering.

By following these steps, your Tooltip should appear correctly when you hover over the PlannerIcon. If you still encounter issues, double-check the props being passed and ensure there are no conflicting styles or other components preventing the tooltip from displaying.

#javascript