带有工具提示文本的 MUI Datagrid 表格单元格溢出工具提示

Question

当单元格中的值太长并被截断时，我试图在 MUI 数据网格的单元格上放置一个工具提示。我使用了以下代码，但问题是当单元格的值非常长时，工具提示的文本（标题）仅在一行上，无法使其成为多行并超出边界工具提示框。

{
      field: 'productTitle',
      headerName: 'TITLE',
      width: 360,
      renderCell: (params: ValueGetterParams) => {
        return (<Tooltip title={<Typography className={classes.tooltipText}>{String(params.getValue('productTitle'))}</Typography>} PopperProps={{ disablePortal: true }} placement="bottom" arrow classes={tooltipClasses} ><span className={classes.cell}><a className={classes.productLink}>{params.getValue('productTitle')}</a></span></Tooltip>)
      },
},

    tooltipText: {
      fontSize: '0.625rem',
      fontWeight: 500,
      color: 'red'
    },
    cell: {
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    }



export const TooltipStyles = makeStyles(() => ({

  arrow: {
    color: '#1EB7F3',
  },
  tooltip: {
    backgroundColor: '#1EB7F3',
    width: 'fit-content',
  },
}));