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?

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?

• javascript
• html
• css
• reactjs
• material-ui

3 Answers 3

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

In my case, I fixed almost the same problem with disabling flip moddifier for Popper:

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

The answer from @95faf8e76605e973 did not work 100% for me. I had to specify the modifier 'preventOverflow' as follows (see below). Otherwise it worked perfectly.

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