Can somebody show an example of how I would attach an igx-tooltip to individual cells of an igx-grid please, and have that tooltip based on the model that populates the row?
In other words, it can't be static text, each cell would display a custom message based on the model.
Hello Scott,
Thank you for your question.
In order to attach an igxTooltip to each cell of the igxGrid by modifying the tooltip's content dynamically, I can suggest you create a single tooltip element in your markup and by templating the cells of the grid, you can mark all the cells as targets for that same tooltip.In addition, you can handle the onTooltipShow event for every target (the cell) by updating the context property of the igxTooltip with any data that is relevant to the specific cell. In the below example, we pass the cell itself as a context to the igxTooltip and this way the tooltip has a direct reference to the necessary data.
<!-- ======= Single tooltip element ======= --> <div #tooltipRef="tooltip" igxTooltip> <ng-container *ngIf="tooltipRef.context"> Value of cell: {{tooltipRef.context.value}} </ng-container> </div> <igx-grid [data]="localData" width="800px" height="600px"> <!-- ======= Name column ======= --> <igx-column field="Name" dataType="string"> <ng-template igxCell let-cell="cell"> <div [igxTooltipTarget]="tooltipRef" (onTooltipShow)="tooltipRef.context=cell" hideDelay="50"> {{cell.value}} <!-- The rowData can be accessed as follows: {{cell.row.rowData}} --> </div> </ng-template> </igx-column> ... </igx-grid>
I have attached a sample application that demonstrates the approach from above.
For more details on using the IgxTooltip and the IgxTooltipTarget directives, you can take a look at the following topic.
If you have any questions, please let me know.
6888.gridWithTooltips.zip
How Can I add static tooltip for header only in igx grid. I tried adding title ="some toolyip" but it does not workk:
<div class="gridContainer"> <igx-grid #defectdetails [data]="defectsData" [autoGenerate]="false" [rowSelectable]="true" [width]="width" height="256px" columnWidth="120px" (onRowSelectionChange)="OnDefectSelection($event)" (onDataPreLoad)="loadDefectData()" (onSortingDone)="OnSortData()" (onFilteringDone)="OnFilterData()" [primaryKey]="'rowid'" [emptyGridMessage]="'No Defects to Display.'" [allowFiltering]="true">
<igx-column header="Pos X" [field]="'PosX'" dataType="number" [filterable]="true" [sortable]="true" [resizable]="true" title="'some Title'"></igx-column> </igx-grid> </div></div>
Hello Mihir,
Thank you for your feedback.
I have attached a sample application that demonstrates the use of the IgxTooltip and the title attribute as described in my previous reply and I was unable to reproduce the issue you mentioned.
Please feel free to modify the sample accordingly, so the issue is reproduced and reattach it here, so we can examine it further.
If you have any questions, please let us know.
5710.gridWithTooltips(Modified).zip
With this approach as well, tooltips don't show up until user has clicked on any header cell to apply sorting
Hello AMIT,
Thank you for the code-snippet you have provided.
In order to apply a static tooltip to a column's header, you can use both the IgxTooltip and the title attribute by retemplating the actual header of the column.
Here is an example of how to use both:
<!-- ======= Name column ======= --> <igx-column field="Name" dataType="string"> <ng-template igxHeader let-column> <span #tp1="tooltip" igxTooltip>Name tooltip</span> <span [igxTooltipTarget]="tp1"> {{column.field}} </span> </ng-template> </igx-column> <!-- ======= Age column ======= --> <igx-column field="Age" dataType="number"> <ng-template igxHeader let-column> <span title="Age tooltip"> {{column.field}} </span> </ng-template> </igx-column>