I have developed a unique custom component to incorporate tooltips for each individual node within 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>
Encountering an issue where all tooltips become active when hovering over a child node.
Seeking a solution to ensure only the current node being hovered displays the tooltip.
Appreciate any assistance.