Using Tooltip for table header in Syncfusion Angular Grid

[Glen Alexander]

Hi, I'm using the Syncfusion Grid control, and wanted a toolltip to show on hover of just 1 of the columns. I found out how to do this from searching your forums and found the below code;

My grid

<ejs-grid #issuesGrid [dataSource]='data' id='IssuesGrid'

                  [allowSorting]="true" [sortSettings]='sortOptions'

                  [allowSelection]="false"

                  [allowPaging]="true"

                  [pageSettings]="pageSettings"

                  (queryCellInfo)='customiseCell($event)'

                  (dataBound)='dataBound($event)'

                  (headerCellInfo)='headerCellInfo($event)'

                  [resizeSettings]="resizeSettings">

            <e-columns>

                <e-column field='epicLink' headerText='Project / Workstream'></e-column>

                <e-column field='priority' headerText='Priority' width="40" maxWidth="40" [disableHtmlEncode]="false" textAlign="Center">

                    <ng-template #template let-data>

                        <span *ngIf="data.priority === 'Critical - Crashes, loss of data, severe memory leak.' || data.priority === 'High - Major loss of function / Published Task'">

                            <ejs-tooltip id='tooltip' content='{{ data.priority }}' opensOn='Hover'>

                                <span class="priority">{{ data.priority }}</span>

                            </ejs-tooltip>

                        </span>

                    </ng-template>

                </e-column>

                <e-column field='key' headerText='Key' width='80' minWidth='80'></e-column>

                <e-column field='summary' headerText='Summary' minWidth='400' ></e-column>

                <e-column field='release' headerText='Release' minWidth="140" maxWidth="140" hideAtMedia='(min-width: 801px)'></e-column>

                <e-column field='status' headerText='Status'>

                    <ng-template #template let-data>

                        <ejs-tooltip id='tooltip' content='{{ data.status }}' opensOn='Hover'>

                            {{ data.status }}

                        </ejs-tooltip>

                    </ng-template>

                </e-column>

                <e-column field='assignee' headerText='Assignee' hideAtMedia='(min-width: 1281px)'></e-column>

                <e-column field='reporter' headerText='Reporter' hideAtMedia='(min-width: 1025px)'></e-column>

                <e-column field='daysSinceUpdated' headerText='Days Since Update' textAlign="Right" minWidth="140" maxWidth="140" ></e-column>

            </e-columns>

        </ejs-grid>

And the typescript

 headerCellInfo(args) {

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

            const toolcontent = args.cell.column.headerText;

            const tooltip: Tooltip = new Tooltip({

                content: toolcontent

            });

            tooltip.appendTo(args.node);

        }

    }

This is working as expected on a desktop monitor, but on touch devices whenever I try to sort a column, any column, it shows a tooltip with the sort icon in it. Have I missed something? Is there a better way to do it? I would even be happy if I could add it as a title attribute rather than the tooltip, but tooltip is preferred.

Attachment: touch_fb57fe6f.zip

[Sujith Kumar Rajkumar]

Hi Glen, 

 

Greetings from Syncfusion support. 

 

Based on the query we would like to let you know that for mobile devices you can show the tooltip on click/touch by setting its ‘opensOn’ property as ‘Click’ as demonstrated in the below code snippet, 

 

this.tooltip = new Tooltip({ 

    position: 'BottomCenter', 

    content: toolcontent, 

    opensOn: 'Click' 

}); 

 

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

 

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

 

More details on the types of open modes in EJ2 tooltip can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/documentation/tooltip/how-to/tooltip-open-or-display-modes/ 

 

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

 

Regards, 

Sujith R 

[Glen Alexander]

Hi, I think you have mistaken my issue. I'm not having an issue with the tooltips not showing on the table header for mobile devices, the issue is that they're ONLY supposed to show for 1 column in my grid, and it is showing on every column's table header, and the content of the Tooltip is displaying the sort icon for the table header, and not what is specified in code.

[Sujith Kumar Rajkumar]

Hi Glen, 

 

Based on the provided information we could understand that you are mentioning the multi sort icon displayed on the columns as shown in the below image, 

 

 

 

We would like to let you know that if multi sorting is enabled and Grid header is tapped on touch screen devices, the column will show popup that allows to perform multi sorting. This is the default behavior for performing multi sort in mobile touch devices and more details on this can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/sorting/#touch-interaction 

 

So we suggest you to use the set the dynamic tooltip’s ‘position’ property as ‘BottomCenter’ which will display the header tooltip content(set for particular columns) as shown in the below image, 

 

 

 

Please check the previously shared sample for reference and get back to us if you require any further assistance. 

 

Regards, 

Sujith R