css 材料UI工具提示未在具有溢出滚动的容器内正确显示

k4ymrczo 于 2023-03-09 发布在其他

关注(0)|答案(2)|浏览(112)

在我的reactJS应用程序中，我使用了一个包含IconButton的Material UI工具提示列表，作为包含overflow: scroll的div容器中的子项。在一个特定行中，Material 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容器上使用overflow: visible;，因为我需要滚动行为，有没有什么方法可以使工具提示从容器中弹出而不进行剪切？

css

来源：https://stackoverflow.com/questions/64220054/material-ui-tooltip-is-not-shown-correctly-inside-a-container-with-overflow-scro

2条答案

按热度按时间

hgc7kmma1#

材质-UI使用Popper.js。你可以通过工具提示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"
>

赞(0）回复(0）举报 2023-03-09

6xfqseft2#

在我的例子中，我修复了与禁用Popper的flipmoddifier几乎相同的问题：

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

赞(0）回复(0）举报 2023-03-09

我来回答

css 材料UI工具提示未在具有溢出滚动的容器内正确显示

2条答案

相关问题

热门标签

最新问答