How to Render custom tooltips in Angular Gantt Chart Template Columns?

Overview

By default, column tooltips in Angular Gantt Chart render based on predefined values. To customize the tooltip for a template column, you can use the Syncfusion Angular Tooltip component inside the column template. This approach provides flexibility to display dynamic and styled content.

Implementation Steps

1. Configure the Gantt Chart with Columns

Render Gantt chart component with requirement configuration and use Syncfusion Tooltip within a template column to display custom tooltips for better user experience.


<ejs-gantt id="ganttDefault" height="450px" [dataSource]="data" [taskFields]="taskSettings">
  <e-columns>
    <!-- Column with built-in tooltip -->
    <e-column field="TaskID" headerText="ID" clipMode="EllipsisWithTooltip" width="100"></e-column>

    <!-- Custom tooltip column -->
    <e-column field="TaskName" headerText="Custom" clipMode="Ellipsis" width="150">
      <ng-template #template let-data>
        <ejs-tooltip [content]="data.TaskName" target=".e-templatecell" [windowCollision]="true">
          <span class="e-templatecell">
            {{ data.TaskName }}
          </span>
        </ejs-tooltip>
      </ng-template>
    </e-column>
  </e-columns>
</ejs-gantt>

Ensure that you define the target property as .e-templatecell for the tooltip component, along with the content property to display the text inside it.

Sample

Refer to the Sample for a working example.

Additional References

Conclusion

Using Syncfusion Angular Tooltip inside a template column allows you to render fully customized tooltips in Angular Gantt Chart, improving user experience and flexibility.

We hope you enjoyed learning how to render custom tooltips in Angular Gantt Chart template columns.

You can refer to the Angular Gantt Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Gantt Chart example to understand how to create and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Angular Gantt Chart and other Angular components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)