How to make Popper be always above React MUI DataGrid and out of its boundaries?

Question

I have a MUI DataGrid Pro table. In one column a cell can contain a tooltip. When tooltip's popper is shown, it is cut by the boundaries of a table and scrollbars appear:

Here is the code of tooltip I'm using:

const StatusMessageTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ popper: className }} />
))({
  [`& .${tooltipClasses.tooltip}`]: {
    whiteSpace: 'normal',
  },
});

return (
  <>
    {params.value}
    {isFailed && (
      <StatusMessageTooltip
        PopperProps={{
          disablePortal: true,
          style: { zIndex: 99999999 },            }}
        title={'Popper Text here'}
        placement="left"
        componentsProps={{
          popper: {
            modifiers: [
              {
                name: 'preventOverflow',
                enabled: false,
              },
            ],
          },
        }}
      >
        <HelpIcon fontSize="small" style={{ marginLeft: 10 }} />
      </StatusMessageTooltip>
    )}
  </>
);

As you can see, I tried to set a z-index, but no luck. Also I tried to enable 'preventOverflow' and set options, like boundariesElement: 'viewport' etc.The popper is always inside the table. Can anyone advise the solution so the popper would be always above the DataGrid table and could be placed outside of its boundaries?

Answer 1

Can you wrap the tooltip with an HTML div?

I have a small solution that worked with certain things can you put the tooltip below the data grid component in the parent component?

Sometimes it's not about the functionality of this component it's about how MUI is stupid