Quick Info / Tooltip Extension


Hi @Aliaksandr,

That’s alright.

The API is up to you guys to decide what’s best for us to use it. So I’ll leave it to you for that.

I still like the idea to not just specify x, y but to define it to show on grid and on chart.
Maybe could also explore the idea of allowing to define the width or dimension of the quickinfo box.

I’ll love to try out the features once you have a pre-release to see how things are once you are ready.



Hi @guldmi,

Following your previous example of displaying quickinfo on the grid when show_chart = true will encounter some alignment issue.

As usual, please refer to my Github for demo.

By default, when it is started, only the grid will be shown.
Click on any task in the grid, will display the quickinfo alignment correctly.
Now, click Show to show the chart.
Click on the any task and you will see that the quickinfo alignment is off.

This only happens if using this to display the quickinfo (in GanttHook.js - useQuickInfo())

if (gantt.config.show_chart) {
        const quickInfo = document.getElementsByClassName("gantt_cal_quick_info")[0];
        if (quickInfo) {
          quickInfo.style.left = '0px';

If you were to remove useQuickInfo() in GanttChart.js, and revert back to the original behavior of quickinfo, then there wouldn’t be any alignment issue.

Any idea what is causing that?



Hi @Joseph!

I’ve tried to reproduce your issue and fix it:

In case timeline is not shown Quickinfo popup is created as a child of the <div class="gantt_grid_data"> element.
But when the timeline is shown Quickinfo is created as a child of the <div class="gantt_grid">.
So you need to change this line in GanttHook.js:


to this:



Hi @guldmi,

Thank you, I will try it out on my end and update on the result later on.