在树中仅显示当前工具提示

Question

I have created a custom component in order to add tooltip to each one of the nodes in a Tree .

function StyledTreeItem(props) {
 const { nodeId, labelText, tooltipTitle, ...other } = props;

 return (
    <Tooltip title={tooltipTitle} placement="left">
        <TreeItem nodeId={nodeId} label={labelText}  {...other} />
    </Tooltip>
 )};

export default function HierarchyTree(props) {

const journeyFilterDataTest = [
    {
        account: ["1551", "4000"],
        campaign: 'DEFECT',
        name: 'XXXX'
    }
]

return (
    <TreeView
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}>
        <StyledTreeItem nodeId="1" labelText={journeyFilterDataTest[0].campaign} tooltipTitle="Category">
            <StyledTreeItem nodeId="2" labelText={journeyFilterDataTest[0].name} tooltipTitle="Name" >
                {journeyFilterDataTest[0].account.map(item => {
                    return <StyledTreeItem key={item} nodeId={item} labelText={item} tooltipTitle="Account" />
                })}
            </StyledTreeItem>
        </StyledTreeItem>
    </TreeView>

The problem is that when I hover over one of the child nodes, then all the tooltips will be active (show on the UI).

How can I make sure that only the current node that the user is hovering will show the tooltip?

Thank you

Answer 1

that's because your nodeId is not unique . Make it unique , then it will show only the tooltip of hovered item . Refer to thissandbox here.

• App.js (exanple of Tree - looping through list of items )
• passing item id as unique id for TreeItem nodeId
• use a state of parentsClick to keep track of parent tree clicked . If a parent was clicked, then only return TreeItem without Tooltip . Otherwise return all.

import React, { useState } from "react";
import "./styles.css";
import { makeStyles } from "@material-ui/core/styles";
import { TreeItem, TreeView } from "@material-ui/lab";
import { Tooltip } from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";

export default function App() {
  const classes = useStyles();
  const [parentsClick, setParentsClick] = useState([]);

  const firstLevel = [
    {
      id: "1",
      label: "Applications",
      secondLevel: [
        { id: "1a", label: "Calendar", thirdLevel: [] },
        { id: "1b", label: "Chrome", thirdLevel: [] },
        { id: "1c", label: "Webstorm", thirdLevel: [] }
      ]
    },
    {
      id: "2",
      label: "Documents",
      secondLevel: [
        { id: "2a", label: "Oss", thirdLevel: [] },
        { id: "2b", label: "Material-UI", thirdLevel: [] }
      ]
    }
  ];

  const StyledTreeItem = (props) => {
    if (parentsClick.includes(props.id))
      return <TreeItem nodeId={props.id} label={props.label} {...props} />;
    else
      return (
        <Tooltip title={props.label} placement="left">
          <TreeItem nodeId={props.id} label={props.label} {...props} />
        </Tooltip>
      );
  };

  return (
    <TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      {firstLevel.length > 0 &&
        firstLevel.map((item1stLvl) => (
          <StyledTreeItem
            key={item1stLvl.id}
            id={item1stLvl.id}
            label={item1stLvl.label}
            onClick={() => {
              if (parentsClick.includes(item1stLvl.id))
                setParentsClick(() =>
                  parentsClick.filter((item) => item !== item1stLvl.id)
                );
              else setParentsClick([item1stLvl.id, ...parentsClick]);
            }}
          >
            {item1stLvl.secondLevel.length > 0 &&
              item1stLvl.secondLevel.map((item2ndLvl) => (
                <StyledTreeItem
                  key={item2ndLvl.id}
                  id={item2ndLvl.id}
                  label={item2ndLvl.label}
                />
              ))}
          </StyledTreeItem>
        ))}
    </TreeView>
  );
}

const useStyles = makeStyles({
  root: {
    height: 240,
    flexGrow: 1,
    maxWidth: 400
  }
});