Tooltip in cell or header causes table to hide while tooltip is displayed

[r2musings]

I'm submitting a ... (check one with "x")

[] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[x] support request => see 'Requesting Community Support'

Not sure yet if a bug or maybe I am specifying something incorrectly, but I am seeing the grid when I mouseover any cell or header that I have a tooltip defined for. See video.

Here is what I have:

const shipmentReportsColumnDefinitions: ColDef[] = [
      {
        colId: 'deviceId',
        field: 'deviceId',
        headerName: this.translocoService.translate('DEVICE'),
        headerTooltip: 'Device header Tooltip',
        width: 175,
        flex: 2,
        tooltipValueGetter: (p: any) => {
          return 'Test Tooltip from Device data cell';
        },
      },
//.....snipped other cols without tooltips ];

<div class="ag-theme-quartz-dark">
            <ag-grid-angular
              [rowData]="descendingShipmentReports()"
              [columnDefs]="shipmentReportsColumnDefinitions"
              style="height: 90%; width: 100%"
            />
          </div>

Current behavior

If you mouseover any cell or header that has the tooltip defined, the grid disappears until you mouse away from that cell/header. In the video, my cursor is not showing but you can see the hover over the rows and you can see when the tooltip shows. The only header/data that I have tooltip defined in the videos is the deviceId column for demonstration purposes. I can hold my mouse over the header and when the tooltip times out, the grid reappears.

https://github.com/user-attachments/assets/9a715bbf-39b4-4827-8640-25dbe894e3a8

Expected behavior

Tooltip to show and not refresh/hide the grid while the tooltip is shown.

Please tell us about your environment:

Windows 10, VS Code, npm, localhost

• AG Grid version: X.X.X

Using 32.2.1. Tried a couple of older versions to see if that resolved, but still happens.

• Browser:

'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36'

• Language: [all | TypeScript X.X | ES6/7 | ES5] "typescript": "5.5.4"

[r2musings]

If anyone comes across this and has the same issue, I resolved by handling the tooltips myself like this:

const shipmentReportsColumnDefinitions: ColDef[] = [
      {
        colId: 'deviceId',
        field: 'deviceId',
        headerName: this.translocoService.translate('DEVICE'),
        headerComponentParams: {
          template: `<span title="${this.translocoService.translate('DEVICE')}">
                        ${this.translocoService.translate('DEVICE')}
                     </span>`,
        },
        width: 175,
        flex: 2,
        cellRenderer: (p: any) => {
          return `<span title='${this.translocoService.translate('DEVICE')}: ${p.data.deviceId}'>
                      ${p.data.deviceId}
                  </span>`;
        },
      },
//...more defs
];

[AG-Zoheil]

Thank you for submitting this on Github.

As this has been open without any further interaction for a while, I will be closing this issue.

Kind regards, Zoheil

[r2musings]

Seems like a bug to me that should be investigated, but I have a workaround so fine with me to close.