CODEWITHSUNDEEP
ag-grid
divtag
divtag

Reputation: 697

Only show a tooltip if the contents of the column are overflowing in AG-Grid

I have one column that can range from just a few words, to a long paragraph. AG-Grid automatically handles the overflow of the column with the 3 dots, but what I am hoping to do is to show a tooltip with the complete contents of that column... but only to show the tooltip when the column is actually overflowing.

Is this even possible?

Thanks in advance!

Upvotes: 5

Views: 2929

Answers (3)

Nima Rahnema
Nima Rahnema

Reputation: 11

Looks like this is now possible in AG Grid 32 using

tooltipShowMode="whenTruncated"

https://ag-grid.com/archive/32.0.0/javascript-data-grid/grid-options/#reference-tooltips-tooltipShowMode

Upvotes: 0

zborecque
zborecque

Reputation: 431

Since it is not possible to detect if cell contents are exceeding the cell dimensions (unless there is some fancy way do read the rendered elements widths), I think the best approach (still not perfect, but works most of the time) is to use the length of the text (as suggested by kifni41), but calculate the maximum text length (over which the tooltip is displayed) based on the current column width, the preferred column width (one, that is calculated by the AG Grid), and the maximum length of the text that appears in this particular column. My idea is to calculate it using a proportion:

actual column width / preferred column width = exceeding text length threshold / max text length that appears in column

Now my tooltip component does not actually use the tooltipValueGetter, rather reads all data from params, but at the same time it sees the rest of the column data and methods, and could look something like this:

const longValueTooltip = params => {
  const getColData = index => {
    return params.api.getDisplayedRowAtIndex(index);
  };
  const data = getColData(params.rowIndex).data;
  const preferredWidth = params.columnApi.columnModel.autoWidthCalculator.getPreferredWidthForColumn(params.column);
  const contentExceedsCell: boolean = preferredWidth > params.column.actualWidth;
  const maxValueLength = () => {
    let index: number = 0;
    let retval: number = 0;
    while (getColData(index) !== undefined) {
      let currentValLength: number =
        getColData(index).data[params.colDef.field].length;
      retval = currentValLength > retval ? currentValLength : retval;
      index++;
    }
    return retval;
  };
  const exceedingValueLength: number = Math.floor((params.column.actualWidth * maxValueLength()) / preferredWidth);
  if (!contentExceedsCell || data[params.colDef.field].length < exceedingValueLength) {
    return "";
  }
  else {
    // render your tooltip here, like this
    return (<div>{data[params.colDef.field]}</div);
  }
}

The reason why I am not using any additional params is that I wanted to create a universal tooltip that would be applied by the default colDef, but then it displays only when necessary.

Upvotes: 0

kifni41
kifni41

Reputation: 76

You can use tooltipValueGetter property in you ag-grid columns definition. so it could be something like this, if it's returns null it will not show any tooltip.

        tooltipValueGetter: function(p){
            console.log(p);
            if (p.value.length > 20) {
                return p.value;
            }
            return null;
        },

Upvotes: -1

Related Questions