带有溢出滚动的容器内部无法正确显示Material UI ToolTip [英] Material UI ToolTip is not shown correctly inside a container with overflow scroll

问题描述

在我的reactJS应用程序中，我将带有IconButton的Material UI ToolTip列表用作 div 容器中具有 overflow:scroll 的子代.在特定行中，材质UI工具提示"如下所示:

 <工具提示PopperProps = {{disablePortal:true，}}onClose = {handleTooltipClose}打开= {打开}disableFocusListenerdisableHoverListenerdisableTouchListenertitle = {数据}箭>< InfoOutlinedIconclassName = {classes.root}onClick = {handleTooltipOpen}/></工具提示></ClickAwayListener> 

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

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

解决方案

材料UI使用 Popper.js .您可以通过

In my reactJS application, I use a list of Material UI ToolTip with IconButton as children inside a div container with overflow: scroll. In a particualar row the Material UI ToolTip looks like this:

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

The position of the tooltip is also not correct as well as the display:

I cannot use overflow: visible; on the div container containing the table and ToolTip as I want the scroll behavior, is there any way I can make the ToolTip pop out of the container without clipping?

解决方案

Material-UI uses Popper.js. You can make use of different Popper.js Options via Tooltip PopperProps to handle these types of situations. In your scenario, I think you can make use of preventOverflow modifier

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

这篇关于带有溢出滚动的容器内部无法正确显示Material UI ToolTip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！