Question

使用React v15.6.2（以及v16）和material-ui@next（当前为v1.0.0-beta.12），每当我在表格标题中使用<Tooltip>组件时，工具提示会在顶部呈现页面的左下角，而不是包含<Tooltip>的元素旁边。如果我将工具提示剪切/粘贴到表体或我的代码中的任何其他位置，它就会按预期工作。

编辑：当我说'工具提示渲染'时，我的意思是当你将鼠标悬停在<Tooltip>内的包裹元素上时显示的元素。我的示例中的<HelpIcon />在<TableCell>

的文字旁边显示正常

这是我正在使用的一个例子：

<Table>
  <TableHead>
    <TableRow>
      <TableCell>
        <span>Column Name That Requires Help Tooltip</span>

        // this tooltip renders off in the top left corner of the screen
        <Tooltip id='help' title='Info About This Column'>
          <HelpIcon />
        </Tooltip>

      </TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    // Tooltip works as intended in any cell in the body
  </TableBody>
</Table>

我能够解决这个问题的唯一方法就是以一种方式破解CSS，使我的最终结果不再像桌子那样（即删除display: table-header-group等）

我的另一个想法是，我可以尝试覆盖工具提示的绝对定位，强制它在产生它的元素旁边，但我想知道为什么只有<TableHead>内部的库失败了计算它应该在悬停时呈现工具提示的位置。

Answer 1

我在GitHub上打开了一个问题，并在最新版本中得到解决。

https://github.com/callemall/material-ui/issues/8467

TableHead Cell中的React material-ui @ next Tooltip不会在元素旁边呈现

1 个答案: