Custom Tooltip Not working on React Gantt Chart

[MANISHA GHOSH]

I am trying to implement a custom tooltip for my React Gantt Chart. But it does not render properly. If I do not have any customization in the tooltip, it renders as expected. It was working couple of weeks ago.

Kindly help with this.

[Sridharan Jayabalan]

Manisha,

 

Greetings from Syncfusion.

 

We have prepared a sample based on your provided code snippet and added our formatTooltip method. No issues occurred on our end. If any issues persist on your end after using the code snippet below, please share the following details:

1. Complete Gantt code details.
2. Share the version details.
3. Share Timezone details.
4. Kindly, replicate the issue in the attached sample and revert us back to proceed further.

Code-Snippet:   

const formatTooltip = (args) => {

    // change the date format to display in the custom tooltip

    const date = new Date(args);

    const options = { month: 'short', day: '2-digit', year: 'numeric' };

    const formattedDate = date.toLocaleDateString('en-US', options);

    return formattedDate;

  };

 

 

const taskbarTooltip = (props) => {

    return ( 

      <table>

        <tr> 

          <td style={{ padding: '3px' }}>Starts On:</td> 

          <td style={{ padding: '3px' }}>{formatTooltip(props.StartDate)}</td> 

        </tr> 

        <tr> 

          <td style={{ padding: '3px' }}>Ends On:</td> 

          <td style={{ padding: '3px' }}>{formatTooltip(props.EndDate)}</td>

        </tr>

      </table>

    );

  };

 

 

  const tooltipSettings = {

    taskbar: templateTaskbar.bind(this),

  };

 

Sample - Zykydq (forked) - StackBlitz

Demo - Gantt Chart · Tooltip Template · Syncfusion React UI Components

Documentation - Taskbar in React Gantt component | Syncfusion    

 

 

Regards,

Sridharan