We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Show first 20 characters in cell but full string in tooltip

For a cell having long text, we enabled auto-wrap, and set clipMode to EllipsisWithTooltip. It works as the attached  screenshot. How to make it to only show the first 20 characters in the cell, and the full string in the tooltip?

Attachment: GridCellWithLongText_f090b2c8.7z

1 Reply 1 reply marked as answer

RS Rajapandiyan Settu Syncfusion Team February 8, 2023 01:41 PM UTC

Hi Ling,

Thanks for contacting Syncfusion support.

Kindly refer to the below documentation to display a custom tooltip in the Grid columns.

Display custom tooltip for columns: https://helpej2.syncfusion.com/angular/documentation/grid/columns/columns?cs-save-lang=1&cs-lang=ts#display-custom-tooltip-for-columns

By using the queryCellInfo event of Grid, we displayed the data up to 20 characters in the cell and added a custom class (ellipsisCell) to the cells which contain more than 20 characters.

queryCellInfo: https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo


  queryCellInfo(args) {

    if (args.column.type == 'string' && args.data[args.column.field] &&  args.data[args.column.field].length > 20) {

       // shown upto 20 characters in the cell   

      args.cell.innerText = args.data[args.column.field].slice(0, 20) + '...';

       // add the custom class to the cells





We have shown the tooltip on the cells by setting the Tooltip target as a custom class (ellipsisCell). In the beforeRender event, you can dynamically bind the tooltip content.

beforeRender: https://ej2.syncfusion.com/angular/documentation/api/tooltip/#beforerender
getRowInfo: https://ej2.syncfusion.com/angular/documentation/api/grid/#getrowinfo



  beforeRender(args): void {

    if (args.target.classList.contains('e-rowcell')) {

      // event triggered before render the tooltip on target element.

      this.tooltip.content = args.target.innerText;

      // get the rowInfo details

      var rowInfo = this.grid.getRowInfo(args.target.closest('td'));

      // get the cell value

      var cellValue = rowInfo.rowData[rowInfo.column['field']];

      // bind the tooltip content

      this.tooltip.content = cellValue;



Sample: https://stackblitz.com/edit/angular-rbx6di-ymjugx?file=src%2Fapp.component.ts,src%2Fapp.component.html


Rajapandiyan S

Marked as answer
Live Chat Icon For mobile
Up arrow icon