Forums Ignite UI for Angular
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
Close
Renukadevi B
45
Igx grid row tooltip
posted

I need to show all column values when hover the row of the grid. 

I can able to add every cell titles, 

but is there any option to show tooltip only adding in igx-column level. (it should available for all the cell hover)

Kindly do reply.

Thanks.

Parents
No Data
Reply
  • 2680
    Verified Answer
    Offline posted

    Hi Renukadevi,

    Thank you for posting to Infragistics Community!

    The current approach to adding a tooltip for a cell is by creating a custom cell display template for its contents, for example:

     <ng-template igxCell let-cell="cell" #tooltipTemplate let-value>
  <div #target="tooltipTarget" [igxTooltipTarget]="tooltipRef">
    {{ cell.value }}
  </div>


  <div #tooltipRef="tooltip" igxTooltip class="tooltiplGrid">
    {{ cell.value }}
  </div>
</ng-template>
     

    In order not to repeat this template for each column, one could reuse it by defining it once and assigning it to each column by leveraging the IgxGrid’s columnInit event:

      @ViewChild('tooltipTemplate', { static: true })
  public tooltipTemplate: TemplateRef<any>;

//..

  public onColumnInit(event: IgxColumnComponent) {
    event.bodyTemplate = this.tooltipTemplate;
  }

    Here is a small sample I prepared for you to demonstrate this.

    Apart from that, defining a tooltip via a single property on the column is not something currently built into the IgxGrid and would be a candidate for a feature request. Such could be logged in the igniteui-angular GitHub repo here.

    Best regards,
    Bozhidara Pachilova
    Software Developer

Children