材质 ui 列表项中图标按钮的工具提示未按预期工作

Question

我对 Material UI 和 React 非常陌生。我遇到了一个非常奇怪的用户界面问题，我希望这里有人能指出我做错了什么。

我在做什么： 我有一个清单。对于每个列表项，我想要一些按钮指向不同的 URL。这是我的列表的代码。这有点伪代码。每个“列表项”都是使用映射生成的，该映射遍历以 JSON 格式保存的数据：

<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>

问题： 该列表显示所有列表项。主要和次要文本以及每个列表项的头像也正确显示，包括 2 个“图标按钮”。

问题是添加到

IconButton

下的

ListItemSecondaryAction

的工具提示。对于第一个列表项，一切都很好。对于所有其他列表项，我必须将鼠标指针移动到图标按钮的底部边缘，以便能够单击并查看工具提示。

如果我完全删除工具提示，则点击不会有任何问题。我可以将鼠标指针移动到图标按钮圆环内的中间或其他区域并执行单击。

我在这里没有正确使用

Tooltip

吗？尝试了 Chrome 和 FireFox，发现了同样的问题。

Answer 1

只需添加父 div 并尝试在其上应用工具提示；它对我有用：

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

Answer 2

将

Tooltip

放在

Icon

周围，而不是

Button

:

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