Change tooltip content of Column

[Yannick Smits]

Hi,

We are currently using your Gantt chart component to create a roadmap. If we hover over an item in the chart we show a custom popup/tooltip. However, we would also like to change what is shown if you hover over an item in the left column. Now it only shows the name of the item, and only if the full name is not completely visible.

Is is possible to change what text is show in that popover/tooltip and how should this be done?

Thanks,

Yannick

[Monisha Sivanthilingam]

Hi Yannick, 

  

Greetings from Syncfusion support. 

  

We can achieve your requirement by making use of the queryCellInfo event to display the custom tooltip for the columns. We have also set the value of the cancel property to true in the beforeTooltipRender event to avoid displaying the default tooltip. The following code snippets demonstrate the solution. 

  

App.vue 

  

<ejs-gantt 

      id="gantt" 

      ref="gantt" 

      :dataSource="data" 

      :resources="resources" 

      :taskFields="taskFields" 

      :resourceFields="resourceFields" 

      :height="height" 

      :editSettings="editSettings" 

      :toolbar="toolbar" 

      :queryCellInfo='queryCellInfoEvent' 

      :beforeTooltipRender='beforeTooltipRender' 

> 

</ejs-gantt> 

  

  

  

methods: { 

    beforeTooltipRender: function(args) { 

      args.cancel = true; 

  }, 

    queryCellInfoEvent: function (args) { 

      let tooltip = new Tooltip({ 

         content: args.data[args.column.field].toString() 

      }, args.cell); 

    } 

}, 

  

  

Sample: https://www.syncfusion.com/downloads/support/forum/170065/ze/F170065-1226977219 

  

Please use the npm install and npm run dev commands to run the sample. 

  

Please contact us if you require any further assistance. 

  

Regards, 

Monisha.