Adding Dynamic Tooltip to Grid Header

Question

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 sortingheaderCellInfo(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);     }    }ThanksNambi R

Sujith Kumar Rajkumar · Accepted Answer

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 · Answer

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 · Answer

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