Material UI ToolTip is not shown correctly inside a container with overflow scroll

user_4181597 0
Viewed 4254

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:

ToolTip bug Tooltip

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 reactjs css html javascript
1 Answers

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

Edit Material demo (forked)

user_86808050
Related