Just starting out with Material UI and React, I've encountered a strange UI problem that I can't quite figure out. Hopefully someone here can help me identify what I did wrong.
My Approach: I have a List in my code where each list item has buttons pointing to different URLs. Below is the code snippet for my list (which is somewhat pseudo code). Each "list item" is generated using map over JSON data:
<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>
The Issue:
The list displays all list items properly with avatars, texts, and icon buttons. However, there seems to be an issue with the tooltips added to the IconButton under the ListItemSecondaryAction. The first list item works fine, but for the rest, I have to hover my mouse right at the bottom edge of the icon buttons to click and view the tooltip.
If I remove the tooltips altogether, clicking on the buttons is not an issue. I can click anywhere within the circular ring of the icon buttons without any problems.
Could it be that I'm not using the Tooltip correctly? I've tried both Chrome and FireFox, but the issue persists in both browsers.