Adding Dynamic Tooltip to Grid Header

[Nambi Ramamoorthy]

Hi Team,

How to add the Dynamic tooltip content for the Grid Header ?

For Example, If you do sort a column the Header Tooltip should shows as Ascending, then if you sort it again then it should shows as Descending .

I have tried this, but it sets initially when the grid loads after that Tooltip content is not changing when I do sorting

headerCellInfo(args) {

     if (args.cell.column.field === 'Order') {

         const toolcontent = this.sortOptions.columns[0].direction;

         const tooltip: Tooltip = new Tooltip({

             content: toolcontent

         });

         tooltip.appendTo(args.node);

     }

    }

Thanks

Nambi R

[Sujith Kumar Rajkumar]

Hi Nambi, 

 

Greetings from Syncfusion support. 

 

You can achieve your requirement of showing the sort order on the column header by assigning the tooltip content dynamically in its beforeOpen event as demonstrated in the below code snippet, 

 

public tooltip: Tooltip; 

 

// Grid’s headerCellInfo event handler 

headerCellInfo(args) { 

    if (args.cell.column.field === 'CustomerName') { 

        this.tooltip = new Tooltip({ 

            beforeOpen: this.beforeOpen.bind(this) 

        }); 

        this.tooltip.appendTo(args.node); 

    } 

} 

 

// Tooltip’s beforeRender event handler 

beforeOpen() { 

    if (this.grid.sortSettings.columns.length !== 0) { 

        // Condition is executed if there are sorted columns 

        this.grid.sortSettings.columns.forEach(col => { 

            if (col.field === 'CustomerName') 

                // The column’s sort direction is set as the tooltip content 

                this.tooltip.content = col.direction; 

        }) 

    } else { 

        // If the particular column is not sorted then the default content can be set here 

        this.tooltip.content = 'default'; 

    } 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/angular-nnjtw7?file=app.component.ts 

 

API link: https://ej2.syncfusion.com/documentation/api/tooltip/#beforeopen 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Nambi Ramamoorthy]

Hi Sujith,

 Thanks. That works for me . 

 One thing I need to know is How to make the text (i.e., Ascending or Descending) to center in Tooltip ? 

 In below screenshot the text Descending is aligned to Left, I need it to be center.

Thanks,

Nambi

[Sujith Kumar Rajkumar]

Hi Nambi, 

 

You’re welcome. 

 

And as for this query – “One thing I need to know is How to make the text (i.e., Ascending or Descending) to center in Tooltip ?”, you can achieve this requirement by setting the EJ2 tooltip component’s position property as TopCenter as demonstrated in the below code snippet, 

 

this.tooltip = new Tooltip({ 

    position: 'TopCenter',  

    beforeOpen: this.beforeOpen.bind(this) 

}); 

this.tooltip.appendTo(args.node);  

 

Please find the below modified sample for your reference, 

 

Sample: https://stackblitz.com/edit/angular-nnjtw7-jlfp9t?file=app.component.ts 

 

More details on the available tooltip positions can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/documentation/tooltip/position/ 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R