I'm finishing my first project but the client wants me to add labels when they hover over certain datagrid cells.

However I can't find any answers on Google on how to add a Material ui Tooltip on the header name.

Someone please help me.

Here's my code. I'll only leave a few headers in the column since they're all quite similar.

 const columns = [
    {
        field: 'memberId',
        headerClassName: 'super-app-theme--header',
        headerAlign: 'center',
        headerName: 'Member ID',
        sortable: true,
        width: 200
    },
    {
        field: 'materialId',
        headerClassName: 'super-app-theme--header',
        headerName: 'Material ID',
        headerAlign: 'center',
        sortable: true,
        width: 200,
        editable: true,
    },
];

const newMembers = []

for(let index in members) {
    newMembers.push(members[index])
}

const displayApiData = () => {
    const loading = [{
        id: 'Calculating...',
        memberId: 'Calculating...',
        materialId: 'Calculating...',
        sectionId: 'Calculating...',
        lm: 'Calculating...',
        lx: 'Calculating...',
        kx: 'Calculating...',
        ly: 'Calculating...',
        ky: 'Calculating...',
        llt: 'Calculating...',
        cbx: 'Calculating...',
        cby: 'Calculating...',
        lsc: 'Calculating...',
        lst: 'Calculating...',
    }]
    if (newMembers === null) {
        return loading
    } else {
        console.log("The new new members === ", JSON.stringify(newMembers));
        let id = 0
        const newOptions = newMembers.map((data) => ({
            id: id++,
            memberId: data.memberId,
            materialId: data.materialId,
            sectionId: data.sectionId,
            lm: data.totalLengthOfMember,
            lx: data.yAxisUnbracedLength,
            kx: data.yAxisEffectiveLengthFactor,
            ly: data.zAxisUnbracedLength,
            ky: data.zAxisEffectiveLengthFactor,
            llt: data.LLT,
            cbx: data.unbracedLengthLateralTorsional,
            cby: data.lateralTorsionalModificationFactor,
            lsc: data.slendernessRatioInCompression,
            lst: data.LST,
        }))
        return (
            newOptions
        )
    }
}