Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
80
Tooltips on a data grid's cell.
posted

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.

Parents
No Data
Reply
  • 6365
    Offline posted

    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

Children