Javascript 在带有溢出滚动条的容器中，材质UI工具提示未正确显示

在我的reactJS应用程序中，我使用带有图标按钮的材质UI工具提示列表作为

div

容器中的子对象，容器带有

overflow:scroll

。 在特定行中，材质UI工具提示如下所示：

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

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

---

我不能使用

溢出：可见

在包含表格和工具提示的div容器上，如果我想要滚动行为，是否有任何方法可以使工具提示在不剪切的情况下从容器中弹出？

材质UI使用

Popper.js

。您可以使用不同的通孔来处理这些类型的情况。在您的场景中，我认为您可以使用

preventOverflow

修饰符

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

---

您好，PopperOps似乎不在材质ui popover属性中。但是我会试试这个。谢谢