Tooltip

8 Mar 20182 minutes to read

The Gantt control has support to display the tooltip for both taskbars and for column cells.

Taskbar tooltip

In Gantt, you can enable or disable the taskbar mouse hover tooltip by using the e-enabletaskbartooltip property. By default, this property is set to true. The following code example shows how to enable the taskbar tooltip in Gantt:

  • JAVASCRIPT
    • <body ng-controller="GanttCtrl">
   <!--Add  Gantt control here-->    
   <div id="GanttContainer" ej-gantt
      //...
      e-enabletaskbartooltip="true" 
      >
   </div>
</body>

    This tooltip can be customized further by using the e-taskbartooltiptemplate property, which is described briefly in the customization section.

    Taskbar drag tooltip

    You can enable or disable the tooltip while performing editing actions on the taskbar (left resizing, right resizing, dragging, and progress resizing) by using the e-enabletaskbardragtooltip property. By default, this property is set to true. The following code example explains this behavior:

  • JAVASCRIPT
    • <body ng-controller="GanttCtrl">
   <!--Add  Gantt control here-->    
   <div id="GanttContainer" ej-gantt
      //...
      e-enabletaskbardragtooltip="true" 
      >
   </div>
</body>

    Cell tooltip

    You can enable or disable the tree grid cell tooltip in mouse hover by using the e-showgridcelltooltip property. By default, this property is set to true. The following code example explains how to enable and disable this property:

  • JAVASCRIPT
    • <body ng-controller="GanttCtrl">
   <!--Add  Gantt control here-->    
   <div id="GanttContainer" ej-gantt
      //...
      e-showgridcelltooltip="true" 
      >
   </div>
</body>

    The tooltip can be customized by using the e-celltooltiptemplate property, which is described briefly in the customization section.

    Tree column (expander column) tooltip

    You can display the tooltip only for expander column by setting the e-showexpandgridcelltooltip property. The following code example shows you to enable expander column tooltip in the Gantt:

  • JAVASCRIPT
    • <body ng-controller="GanttCtrl">
   <!--Add  Gantt control here-->    
   <div id="GanttContainer" ej-gantt
      //...
      e-showexpandgridcelltooltip="true" 
      >
   </div>
</body>