Here is what i tried prior to your post with no luck, maybe you can tell me why its not working or whats missing

Here is how i set up the tooltip when i setup columns

 {
                headerName: 'Email',
                field: 'emails',
                width: 150,
                sortable: false,
                cellRendererFramework: MultiKeyValueItemRendererComponent,
                cellRendererParams: {
                    field: 'emails',
                },
                tooltip: function (params) {
                    return EmailsTooltipRenderer(params);
                },
            }

export function EmailsTooltipRenderer (params) {
    let tooltipHtml = ``;
    const values = <IServerDropdownOption[]>params.value;
    if (values && values.length) {
        values.forEach((value, i) => {
            tooltipHtml += `${value.value} ${value.name ? '(' + value.name + ')' : ''}`;
            if (i !== (values.length - 1)) {
                tooltipHtml += `\n`;
            }
        });
    }

    return tooltipHtml;
}

.custom-tooltip {
    position: absolute;
    width: 150px;
    height: 70px;
    border: 1px solid cornflowerblue;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 1s;
}

#tooltip {
    position: absolute;
    width: 150px;
    height: 70px;
    border: 1px solid cornflowerblue;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 1s;
}