I'm very new to Material UI and React. I've got a very odd UI issue and I'm hoping someone here can point out what I did wrong.

What I am doing: I have a List. For each list items, I want some button to point to different URLs. Here's the code of my list. This is somewhat pseudo code. Each "list item" is generated using map that goes over a data saved in JSON format:

<List>
   <ListItem button component="a" href={infoUrl}>
            <ListItemAvatar>
                <Avatar src={itemIcon} />
            </ListItemAvatar>
            <ListItemText 
                primary={this.props.project.name_with_namespace} 
                secondary={this.props.project.description}
            />
            <ListItemSecondaryAction>
                <Tooltip id="button-report" title="Report">
                    <IconButton area-label="Report" href={reportUrl}>
                        <AssessmentIcon />
                    </IconButton>
                </Tooltip>
                <Tooltip id="button-codeRepo" title="Code Repository">
                    <IconButton area-label="Code Repository" href={repoUrl}>
                        <CodeIcon />
                    </IconButton>
                </Tooltip>
            </ListItemSecondaryAction>
        </ListItem>
   </List>

Problem: The list is showing up with all the list items. Primary and Secondary texts as well as the avatars for each list item is also showing up properly, including the 2 "IconButton".

The problem is the tooltip that was added to the IconButton under the ListItemSecondaryAction. For the very first list item, everything is good. For all the other list items, I have to move my mouse pointer to the bottom edge of the icon buttons in order to be able to Click and also see the tooltip.

If I remove the tooltips completely, I don't have any issue with the clicks. I can move the mouse pointer to the middle or other areas within the circular ring of the icon buttons and perform a click.

Am I not using the Tooltip properly here? Tried both Chrome and FireFox and seeing the same issue.

I'm very new to Material UI and React. I've got a very odd UI issue and I'm hoping someone here can point out what I did wrong.

What I am doing: I have a List. For each list items, I want some button to point to different URLs. Here's the code of my list. This is somewhat pseudo code. Each "list item" is generated using map that goes over a data saved in JSON format:

<List>
   <ListItem button component="a" href={infoUrl}>
            <ListItemAvatar>
                <Avatar src={itemIcon} />
            </ListItemAvatar>
            <ListItemText 
                primary={this.props.project.name_with_namespace} 
                secondary={this.props.project.description}
            />
            <ListItemSecondaryAction>
                <Tooltip id="button-report" title="Report">
                    <IconButton area-label="Report" href={reportUrl}>
                        <AssessmentIcon />
                    </IconButton>
                </Tooltip>
                <Tooltip id="button-codeRepo" title="Code Repository">
                    <IconButton area-label="Code Repository" href={repoUrl}>
                        <CodeIcon />
                    </IconButton>
                </Tooltip>
            </ListItemSecondaryAction>
        </ListItem>
   </List>

Problem: The list is showing up with all the list items. Primary and Secondary texts as well as the avatars for each list item is also showing up properly, including the 2 "IconButton".

The problem is the tooltip that was added to the IconButton under the ListItemSecondaryAction. For the very first list item, everything is good. For all the other list items, I have to move my mouse pointer to the bottom edge of the icon buttons in order to be able to Click and also see the tooltip.

If I remove the tooltips completely, I don't have any issue with the clicks. I can move the mouse pointer to the middle or other areas within the circular ring of the icon buttons and perform a click.

Am I not using the Tooltip properly here? Tried both Chrome and FireFox and seeing the same issue.

• javascript
• css
• tooltip
• material-ui
• listitem

• Can you make a test case that shows the problem? Start from here if it helps: codesandbox.io/s/y334rqrpp9 – thirtydot Commented Jun 22, 2018 at 15:53
• Thank you for your comment and the suggestion. I just tried that sandbox but couldn't reproduce the issue there. The code looks exactly how I have it in my project. codesandbox.io/s/qxyyzkow8q – aver Commented Jun 22, 2018 at 16:27
• 1 In your question it says: "Each "list item" is generated using map that goes over a data saved in JSON format". Your demo doesn't do that, so it could be related to that. Try to make your demo the same as your actual code. It's hard to help without being able to see the problem. – thirtydot Commented Jun 22, 2018 at 16:34
• I just did an experiment by removing my auto generated "list items" with static list item (same code in example post). And I have the same issue. After inspecting the html elements, noticed there are several div elements towards the bottom like this. Hovering over each icon buttons refer to these except the first list item. <div style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(998px, 196px, 0px);"><div id="button-mail" role="tooltip" aria-hidden="true" class="MuiTooltip-tooltip-112 MuiTooltip-tooltipPlacementBottom-117">Check mails</div></div> – aver Commented Jun 22, 2018 at 16:52

2 Answers 2

Just add parent div and try to apply tooltip on that; it worked for me:

<Tooltip title="delete" placement="start-top">
  <div>
    <AiOutlineDelete style={{ fontSize: '30px', alignSelf: 'center' }}/>
  </div>
</Tooltip>

Put the Tooltip around the Icon, not the Button:

   <IconButton aria-label="Report" href={reportUrl}>
     <Tooltip id="button-report" title="Report">
       <AssessmentIcon />
     </Tooltip>
   </IconButton>