How to control toop tip ellipses in Grid table

[Dileep]

Requirement : I want to display the ellipses tool tip when the text is big . if the text is small no need to display the elipsses . 

The thing is the ellipses is getting applied for small and large text . I want to display elipses only to large text . 

I have tried query info cell method also but unable to figure out how the ellipses is getting applied on all columns . 

Below is the code applied :  

tooltip(args: QueryCellInfoEventArgs) {

    // you can also add tooltip based on condition here

    if (args.column.field == UploadDetailsConst.Col1 || args.column.field == UploadDetailsConst.Col2 || args.column.field == UploadDetailsConst.Col3 || args.column.field == UploadDetailsConst.Col4) {

      let tooltip: Tooltip = new Tooltip({

        content: args.data[args.column.field].toString()

      }, args.cell as HTMLTableCellElement);

    }

  }

[Pavithra Subramaniyam]

Hi Dileep,

Thanks for contacting Syncfusion support.

You can achieve your requirement by setting the column “clipMode” as “EllipsisWithTooltip”. It will show the ellipsis only when the content exceeds the cell width. While hovering these content tooltips will be displayed. For other cells, it won’t be applied. Please refer to the below documentation and sample link for more information.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/cell/clip-mode/

Sample               : https://stackblitz.com/edit/angular-awcvez?file=app.component.html

In your code, you have already added this property. So, in case this property does not meet your requirement please share the details of why you have added the tooltip programmatically for these columns and the issue you are facing with the Clip Mode feature. That will be helpful for us to validate your requirement further and provide a better solution as early as possible.

Regards,

Pavithra S