Please see the samplehttps://es.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-pinning
When hovering over any of the record e.g "Owner", "Ana Trujillo" etc at a certain point the border of default tooltip/title is cutting off.
In addition to my initial reply, setting the IgxTooltip on each cell in multiple columns could be achieved easily by defining a cell template using the igxCell directive and adding the tooltip configurations inside the template. Then, in order to apply this template to each cell in all columns, I would suggest using the IgxGrid’s columnInit event and setting the bodyTemplate property to the custom template.
This could look similar to the following:
<!-- component.html --> <igx-grid [data]="data" [primaryKey]="'ID'" (columnInit)="columnInit($event)" > <igx-column [field]="'ID'"></igx-column> ... </igx-grid> <!-- Cell template with IgxTooltip --> <ng-template #cellTemplate igxCell let-cell="cell"> <div #tooltipRef="tooltip" igxTooltip> {{ cell.value }} </div> <div [igxTooltipTarget]="tooltipRef"> {{ cell.value }} </div> </ng-template>
// component.ts @ViewChild('cellTemplate', { static: true }) public cellTemplate!: TemplateRef<any>; public columnInit(column: IgxColumnComponent) { column.bodyTemplate = this.cellTemplate; }
Here could be found a small sample for your reference.
However, in case you would like to continue using the default tooltip, I believe you will find the following StackOverflow post here helpful.
Please let me know if you need any further assistance regarding the IgxTooltip component.
Looking forward to your reply.
Sincerely, Riva Ivanova Associate Software Developer