Ag-grid custom tooltip is not working for grid cells

I want to use an ag-grid custom tooltip in a project. I have made a js component for tooltip as per the documentation of ag-grid https://www.ag-grid.com/javascript-grid-tooltip-component/ and assign it to this.gridOptions = config. The custom tooltip function is getting called on hover of column Header but, it's not on cell hover and not showing tooltip. If anyone knows, what I am missing here, please guide me.

Sample code:

prepareConfig() {

        config.enableBrowserTooltips = false;
        config.defaultColDef= {
            sortable: true,
            tooltipComponent: 'customTooltip'
        },
        
        function CustomTooltip() {}
        CustomTooltip.prototype.init = function (params) {
            var eGui = (this.eGui = document.createElement('div'));
            let color = 'white';
            let data = params.rowIndex >= 0 ? params.api.getDisplayedRowAtIndex(params.rowIndex).data : params.value;

            eGui.style['background-color'] = color;
            if (data.subtitle) {
            eGui.classList.add('custom-tooltip');   
            eGui.innerHTML =
                '<div><div class="custom-tooltip-title">' + data.col1 + '</div><div  class="custom-tooltip-body">' +
                data.subtitle + '</div></div>';
             } else {
                eGui.classList.add('ag-tooltip');
                eGui.innerHTML = '<div>' + data.col1 + '</div>';
             }
        };

        CustomTooltip.prototype.getGui = function () {
            return this.eGui;
        };
        config.components = {
            customTooltip: CustomTooltip
        }

        return config;
}  

CSS

.custom-tooltip {
            position:absolute;
            box-shadow: 3px 3px 3px 0px #b9b9b9;
            border: 1px solid #c3c3c3;
            padding:5px;
            .custom-tooltip-title {
              font-weight:bold;
            }
            .custom-tooltip-body {
              margin-top:5px;
            }
        }
        
        .ag-tooltip {
            font-size: 13px;
            box-shadow: 3px 3px 3px 0px #b9b9b9;
            border: 1px solid #c3c3c3;
            padding: 5px;
            background:white;
        }

Attaching a screenshot of grid table for reference grid table