I am working on react ag grid table which is an older version (18 beta), as per the requirement and existing functionality i cannot update/migrate versions, so i want to create a custom tooltip when hovering on the table for one of the column Data Volume. for that i tried many but nothing works.

Can you please help me to create customized component based tool tip which will display the some information related to Data Volume.

This is what i tried but not working

Code:

1. CustomTooltip.js

   import React from 'react';
   
   const CustomTooltip = ({ value }) => {
     return (
       <div style={{ padding: '10px', backgroundColor: 'rgba(0,0,0,0.7)', color: 'white', borderRadius: '5px' }}>
         <p><strong>Data Volume:</strong> {value}%</p>
       </div>
     );
   };
   
   export default CustomTooltip;
   

2. MyAgGrid.js

    import React, { Component } from 'react';
    import { AgGridReact } from 'ag-grid-react';
    import 'ag-grid-community/styles/ag-grid.css';
    import 'ag-grid-community/styles/ag-theme-alpine.css';
    import CustomTooltip from './CustomTooltip';
    
    class MyAgGrid extends Component {
      constructor(props) {
        super(props);
        this.state = {
          columnDefs: [
            {
              headerName: 'Country',
              field: 'country',
              width: 170,
              cellStyle: { fontSize: '16px' },
            },
            {
              headerName: 'Severity',
              field: 'severity',
              width: 130,
              cellStyle: { fontSize: '16px' },
            },
            {
              headerName: 'Data Volume',
              field: 'dataVol',
              width: 210,
              tooltipComponent: 'customTooltip',
            },
            {
              headerName: 'Timestamp',
              field: 'timestamp',
              width: 150,
            },
          ],
          rowData: [
            { country: 'india', severity: 'High',  dataVol: 10,  timestamp: '2023-09-11' },
            { country: 'japan', severity: 'High',  dataVol: 1,  timestamp: '2023-09-10' },
            { country: 'china', severity: 'High',  dataVol: 0,  timestamp: '2023-09-09' },
          ],
          frameworkComponents: {
            customTooltip: CustomTooltip, 
          }
        };
      }
    
      render() {
        const { columnDefs, rowData, frameworkComponents } = this.state;
    
        return (
          <div className="ag-theme-alpine" style={{ height: '400px', width: '600px' }}>
            <AgGridReact
              columnDefs={columnDefs}
              rowData={rowData}
              frameworkComponents={frameworkComponents}
              domLayout="autoHeight"
            />
          </div>
        );
      }
    }
    
    export default MyAgGrid;