MUI Datagrid table cell with Tooltip text that overflows out of tooltip

Question

I'm trying to put a Tooltip on the cells of a MUI Datagrid for when the value in the cell is too long and is cut off. I've used the following code, but the problem is that when the value of the cell is extremely long, the tooltip's text (title) is only on a single line and not able to make it multi-lined and goes out of the bounds of the tooltip box.

{
      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',
  },
}));

Answer 1

Thanks to your question, I did resolve my problem, thanks!

I share my solution for your, that was usefull for my requirements.

renderCell: (params) => (
        <p
            title={String(params.getValue(params.id, 'details'))}
            style={{ textAlign: "start" }}
        >
            {String(params.getValue(params.id, 'details'))}
        </p>
    ),