Custom Tooltip

[Andrew Tarr]

Hello. 

I have custom fields and i need to add a custom tooltip that should display additional data, that isnt part of the object. I added a comment in the td where i want to display the tooltip. Any help would be appreciated.

<ejs-gantt id='resources' [dataSource]='data' [taskFields]='taskSettings' [treeColumnIndex]='0'

        [splitterSettings]='splitterSettings' [labelSettings]='labelSettings' [enableContextMenu]='false' [tooltipSettings]='tooltipSettings'

        [rowHeight]='61' [allowUnscheduledTasks]='true' [allowRowDragAndDrop]='true' (rowDrop)='rowDrop($event)' (beforeTooltipRender)='showContent($event)'

        (queryCellInfo)='showContent($event)'

        [toolbar]='toolbar' [resourceFields]='resourceFields' (rowDataBound)='rowDataBound($event)' (dataBound)='actionComplete($event)'

        [timelineSettings]='timelineSettings' [projectStartDate]='projectStartDate' [projectEndDate]='projectEndDate'

        workUnit='Hour' [eventMarkers]='eventMarkers'>        

        <e-columns>           

            <e-column field='TaskID' visible='false' width='0' >

                <ng-template #template let-data>

                    <div class='e-treecolumn-container'>

                        <span class='e-treecell'></span></div>

                </ng-template>

            </e-column>

            <e-column field='TaskName' headerText='Name' width='180' headerTextAlign='left'>

                <ng-template  #template let-data>                

                    <table style='width:180px;' *ngIf='data.taskData.IsSectionHeader'>

                        <tr>

                            <td>{{data.taskData.Bucket}}</td>

                        </tr>

                    </table>

                    <table style='width:180px;height: 50px' *ngIf='!data.taskData.IsSectionHeader'>

                        <tr>

                            <td>{{data.taskData.TeamName}}</td>

                        </tr> 

                        <tr>

                            <th>{{data.taskData.TaskName}}</th>

                        </tr>

                    </table>

                </ng-template>

            </e-column>

            <e-column field='Details' headerText='Details' width='300' textAlign='center'>

                <ng-template #template let-data>

                    <table style='width:300px;height: 50px;' *ngIf='!data.taskData.IsSectionHeader' class="e-details-table">

                        <thead>

                            <tr>

                                <th width='100'>Allocated</th>

                                <th width='100'>Stories</th>

                                <th width='100'>Points</th>

                            </tr>

                        </thead>

                        <tbody>

                            <tr>

                                <td class="font-weight-bold e-allocation-field">

<!-- Show Tooltip as 'Actual: {data.taskDate.AllocationActual}%' -->

                                    <span

                                        [ngClass]='{                                        

                                        "endangered": data.taskData.AllocationStatus !== AllocationStatus.OnTrack

                                    }'>{{data.taskData.Allocation}}%</span>

                                </td>

                                <td>{{data.taskData.StoriesCurrent}} of {{replaceEmpty(data.taskData.StoriesTotal)}}</td>

                                <td>{{data.taskData.PointCurrent}} of {{replaceEmpty(data.taskData.PointsTotal)}}</td>

                            </tr>

                        </tbody>

                    </table>

                </ng-template>

            </e-column>            

        </e-columns>

    </ejs-gantt>

[Pooja Priya Krishna Moorthy]

Hi Andrew, 

We can render custom tooltips for columns, by rendering tooltip component, using queryCellInfo event. Please find the below code example. 

[app.component.html] 

<ejs-gantt 

  //... 

  (queryCellInfo) = "queryCellInfo($event)"> 

</ejs-gantt> 

[app.component.ts] 

public queryCellInfo(args: any): void { 

 if (args.column.field == "Details") { 

   const tooltip: Tooltip = new Tooltip({ 

    content: 'Allocated: ' + args.data.taskData.allocated 

    }, args.cell as HTMLTableCellElement); 

 } 

} 

 

Please find the below sample link. 

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

 

Regards, 

Pooja K.

[Andrew Tarr]

That solution works only for the whole details column...i need the tooltip specifically on the allocation cell. Is there a way to do this besides splitting out the allocation field into its own column?

[Logeswari Gopalakrishnan]

Hi Andrew, 

You can render tooltip for particular td rendered within the grid cell, by define the property target while initializing the tooltip component. Please find the below code example. 

[app.component.html] 

<e-columns > 

//... 

<tr> 

    <td id='allocated_{{data.taskData.TaskID}}' > Allocated < /td> 

     //... 

</tr> 

   //... 

</e-columns> 

[app.component.ts] 

public queryCellInfo(args: any): void { 

  if (args.column.field == "Details" && !args.data.taskData.isHeader) { 

  const tooltip: Tooltip = new Tooltip({ 

    content: 'Allocated: ' + args.data.taskData.allocated, 

    target: "#allocated_" + args.data.taskData.TaskID, 

  }, args.cell as HTMLTableCellElement); 

  } 

} 

  

Please find the below sample link. 

Sample - https://stackblitz.com/edit/angular-zvf4sr-vourrt?file=app.component.html 

  

Regards, 

Logeswari G