Material UI ToolTip 未在带有溢出滚动的容器内正确显示

Question

在我的 reactJS 应用程序中，我在带有 overflow: scroll 的 div 容器中使用带有 IconButton 的 Material UI ToolTip 列表作为子项。 在特定的一行中，Material UI ToolTip 如下所示：

   <ClickAwayListener onClickAway={handleTooltipClose}>
      <Tooltip
        PopperProps={{
          disablePortal: true,
        }}
        onClose={handleTooltipClose}
        open={open}
        disableFocusListener
        disableHoverListener
        disableTouchListener
        title={data}
        arrow
      >
        <InfoOutlinedIcon
          className={classes.root}
          onClick={handleTooltipOpen}
        />
      </Tooltip>
    </ClickAwayListener>

工具提示的位置也不正确，显示也不正确：

我不能在包含表格和 ToolTip 的 div 容器上使用 overflow: visible;，因为我想要滚动行为，有什么方法可以让 ToolTip 从容器中弹出而不进行剪辑？

Answer 1

Material-UI 使用Popper.js。您可以通过Tooltip PopperProps 使用不同的Popper.js Options 来处理这些类型的情况。在您的场景中，我认为您可以使用 preventOverflow 修饰符

<Tooltip
  PopperProps={{
    disablePortal: true,
    popperOptions: {
      positionFixed: true,
      modifiers: {
        preventOverflow: {
          enabled: true,
          boundariesElement: "window" // where "window" is the boundary
        }
      }
    }
  }}
  title={popperTitle}
  aria-label="add"
>