在我的reactJS應用程序中，我使用了一個帶有IconButton的材質UI工具提示列表，作為帶有overflow: scroll的div容器中的子容器。 在特定行中，材質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>

工具提示的位置和顯示也不正確:

我不能使用overflow:visible；在包含表格和工具提示的div容器上，我想要滾動行為，有什么方法可以讓工具提示彈出容器而不被裁剪？

### Material-UI使用Popper.js。您可以通過工具提示PopperProps使用不同的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"
>

# # #在我的情況下，我修復了禁用Popper的flip moddifier時幾乎相同的問題:

<Tooltip
        title={title}
        placement="top"
        arrow
        open={open}
        PopperProps={{
            disablePortal: true,
            popperOptions: {
                modifiers: [
                    {
                        name: 'flip',
                        enabled: false
                    }
                ]
            }
        }}
    >
        {children}
    </Tooltip>

# # #來自@95faf8e76605e973的回答對我來說并不是100%管用。我必須如下指定修飾符‘preventOverflow ’(見下文)。除此之外，它運行得非常好。

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