tooltip for icon buttons in material ui list item is not working as expected

Question

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.

Answer 1

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>