I'm using the enterprise ag-Grid version in my project.
I found tooltip supporting under the box and make as follows:

columnDefs = [
{
    headerName: 'USER NAME',
    field: 'userName',
    sortingOrder: ['asc', 'desc'],
    filter: 'agTextColumnFilter',
    filterParams: {newRowsAction: "keep"},
    floatingFilterComponentParams: {suppressFilterButton: true},
    suppressMenu: true,
    tooltip: (t: any) => { return t.value; }
}, //...
];

Tooltip works fine and shows above every cell of the 'userName' column in my grid.
Is it possible to show tooltip above headers/cells if a text is ellipsis only?

Thanks in advance.

I'm using the enterprise ag-Grid version in my project.
I found tooltip supporting under the box and make as follows:

columnDefs = [
{
    headerName: 'USER NAME',
    field: 'userName',
    sortingOrder: ['asc', 'desc'],
    filter: 'agTextColumnFilter',
    filterParams: {newRowsAction: "keep"},
    floatingFilterComponentParams: {suppressFilterButton: true},
    suppressMenu: true,
    tooltip: (t: any) => { return t.value; }
}, //...
];

Tooltip works fine and shows above every cell of the 'userName' column in my grid.
Is it possible to show tooltip above headers/cells if a text is ellipsis only?

Thanks in advance.

• javascript
• angular6
• ag-grid
• ag-grid-ng2

• 1 Did you find an answer? I have the exact same question. – Megan Crane Commented Jul 1, 2022 at 0:11
• I'm also have same requirement – jeeva Commented Dec 21, 2022 at 16:02
• Same here .. did u find a solution? – simpledev Commented Nov 24, 2023 at 12:35

2 Answers 2

In case of someone is checking this question, maybe a solution could be use this one to detect if ellipsis is showing.

Then do something like this:

if (ellipsisIsShowing())
   return t.value;
else 
  return; //no tooltip will be shown

In continuation from @cacatua_box answer here my solution. Only cell level.

    ...
    defaultColDef: {
      sortable: true,
      filter: true,
      resizable: true,
      suppressMovable: true,
      tooltipComponent: CustomTooltip,
    },

class CustomTooltip {
  eGui: HTMLDivElement

  init(params: ITooltipParams) {
    this.eGui = document.createElement('div')
    this.eGui.innerHTML = params.value

    // eslint-disable-next-line @typescript-eslint/ban-ts-ment
    // @ts-ignore
    const cell = params.api.rowRenderer.rowCtrlsByRowIndex[params.rowIndex]?.centerGui.element.querySelector(`[col-id='${params.column.colId}']`) // prettier-ignore

    this.eGui.style.display = cell?.scrollWidth > cell?.offsetWidth || params.location === 'header' ? 'block' : 'none'
  }

  getGui() {
    return this.eGui
  }
}