Quick Info / Tooltip Extension


Quick Info

Is it possible to customize quick info extension popup box?

Such as determine when the box should show when onClick. So like onBeforeShowQuickInfo, I can perform check such as priority is high then the quick info box will launch. Otherwise, do not launch.

And customize the 2 button, and what it does after click. As I won’t be using Lightbox, then it clicking on the button will not trigger any Lightbox stuff, but my own defined action, or form to launch.


How about the ability to also customize Tooltip? Such as having some button inside the Tooltip. But currently, whenever you move the mouse, the Tooltip will disappear when out of focus (on the grid or on the bar). So if able to add button inside the Tooltip, how about allow it to show long enough to move inside the Tooltip area and click on the button?

Lastly, how to set the z-index (maybe?) to always show the Tooltip on top of the Grid/Chart? Currently, I have a base layer, then a layer on top of the base layer to show the gantt. But when my mouse hover on the task on grid/chart, I am not able to view the Tooltip.


Hi @Joseph !

Unfortunately, there is no onBeforeShowQuickInfo event. But you can use hideQuickInfo() method on onQuickInfo event instead.

If you want to customize QuickInfo buttons, check the information about it here, please:

Here is a sample, where you can see how it can be implemented :

To make tooltip stay on the screen for some time, you can use tooltip_hide_timeout property.
Here is a sample:

If you want to add some style properties to the tooltip. Add them to .gantt_tooltip class. For example:

Alternatively, you can create a tooltip with extended configuration. Set extended z-index for it and other styles. Check about gantt.ext.tooltips.attach(), please:

Here is a sample, where you can see how it can be implemented for the links:

Hi guldmi,

Thanks for the samples, it’s really helping get more clearer picture of the features. Some additional questions.

In the following event/method gantt.$click.buttons.advanced_details_button=function(e, id, trg), how do I know what exactly are the args available to the function? I tried to print out e, id, trg but only e gives me the id where I suppose that id should return me the id instead? The other 2 parameter gives me undefined.

For the example on Tooltip, it doesn’t seem to be working quite as expected. When my mouse hover on Project #2, and I want to click on the click me button inside the Tooltip, I can’t. Because when I try to move to the click me, the Tooltip will be refreshed to show the Task #1 tooltip. Only if I am hovering on Task #2 with no task below, then I can move to the click me to click on the button inside the Tooltip.


Hi @Joseph!

Sorry, there is a mistake in the gantt documentation. We will fix it soon.
There is only id argument in the $click.buttons.advanced_details_button=function(id).

I agree, now I see there is no good solution for adjusting tooltips to what you need via config. Setting a delay before hiding a tooltip was a workaround that didn’t work that well.

For this reason, I suggest looking into an alternative approach - gantt.ext.tooltips.attach() - you can define custom logic for displaying tooltips and add all necessary delays

Hi @guldmi,

Sure, thanks for that.

Alright, I am avoiding to have button on Tooltip though so right now, with the z-index, it is good enough for me to display the info I want.

Something else I would like to check as well…

If I am using both QuickInfo and Tooltip, both of them would show up which may not be the best. Is there any way that maybe to check if the show_chart is false (chart is not shown), then I will show Tooltip, otherwise, I will show QuickInfo instead since I can place the info on the Tooltip into the QuickInfo. Any event that I can tap on to achieve this?


Hi @Joseph,

Hi ,

You can use gantt.templates.tooltip_text to control tooltips:

You can use show_quick_info to activate/disable the ‘quick_info’ extension

Please don’t forget to use gantt.render() method to repaint the changes:

Here is the sample, where you can see how it can be implemented:

Hi @guldmi,

Seem to be exactly what I wanted. Thanks for that.

Hi @guldmi,

Can I also check if it is possible to display QuickInfo box on the Grid when show_chart = false.
Currently, QuickInfo box is only show when selected and Chart is shown. I would like to display QuickInfo box when the row is selected and Chart is hidden.

Also, is there a API to call to hide the Tooltip? Such as gantt.getToolTip().hide(), something like that.
Reason being is that sometimes it doesn’t seem to capture the mouse has left the focus, and the tooltip does not hide after the timeout period. Especially if I move my mouse pretty fast to other area, which kind of cause the Tooltip to hang at that position and it will never hide after the timeout.
If you see my screenshot @ Weird bug with Gantt 6.1.3/4, sometimes I click the Add button and the component changes, but the Tooltip will still be shown in the middle of my new component and block the view, and it will never be able to get it hidden. Hope I put my point across, and not too confusing.


Hi @Joseph!
There is no built-in Gantt chart feature to show quickinfo in the grid.
but you can do it like in this snippet:

Alternatively, you can use gantt.ext.tooltips.attach() method to make the tooltip position independent of the position of the cursor.
Here is the sample, where you can see how it can be implemented for the tasks:

Hi @guldmi,

Thanks for the sample, it should be able to do what I want. Will try it out soon.

I have another issue using quickinfo.

It seem like gantt.$click event is not registered after a component change.

Please see this example in Codesandbox.

  1. Click on any of the task, the quick info box will appear.
  2. Click on the Start button, the gantt message box will appear
  3. Click cancel to close the message box
  4. Click on the About link on top of the page
  5. Click on the Home link on top of the page to return back to the Gantt page
  6. Repeat Step 1
  7. Click on the Start button, nothing will happen.

If I refresh the page, then it will work again until I change to another component and back to Gantt again.

Any idea what is going on?


Hi @Joseph!

It appears to be a bug on our end, thank you for reporting it.

Event handlers for quick info buttons are removed when gantt.init is called for the second time, and attached again only when a new DOM element for a quick info popup is created.

I’ve submitted it to our internal tracker, and the dev team has started fixing it and it will be published with the next bugfix release.

If you have any subscription to the Gantt Chart, you can contact the technical support and get the build with the fixed bug or I can PM you a download link you have a gpl version.

As a workaround for the issue, you can clear the internal quick info element before calling gantt.init. it will force reinitialization of the event listeners and will solve the issue:

gantt._quick_info_box = null;

Or you can do it from onGanttReady event:

gantt.attachEvent("onGanttReady", function(){
     gantt._quick_info_box = null;

In this case, you’ll want to be sure that onGanttReady is attached only once per gantt instance (i.e. it’s not attached each time you display gantt), since otherwise more and more listeners will be attached which will cause a memory leak.
Here is a snippet of how it can be done:

Hi @guldmi,

Thank you for the acknowledgement.

I can help to perform a test prior to your next release with the GPL version. But as I have described in Weird bug with Gantt 6.1.3/4 with regards to the issue of running (local) using pre-release version. Not sure if it is because I did the it wrong way or otherwise. Appreciate if there is a better instruction for me to do so.

As a temporary measure, I will try out setting _quick_info_box to null first. I guess this would be easier than doing on onGanttReady event.

Lastly, is there any ETA for your upcoming release with the bugfix?

Thank you.

Hi @guldmi,

I just re-visited this, and have some issue with the sample provided. I have made my own snippet.

  1. If I set show_chart = false, and click on the grid row, the following error will occur.

Not exactly sure what it meant, but hope it helps you. Note that the TypeError only display in Chrome. When I tried to do the same in Microsoft Edge, it just simply throw Invalid Argument error message.

  1. If I remove setTimeout(), and show_chart = true, when I click on the left grid row, the quick_info_box will show up on the left grid. However, if I remove the setTimeout(), quick_info_box will always display on the chart as far as I have tested, and can tell. Any idea?

  2. I also noticed that the behavior for displaying quick_info_box with show_chart = true config, is that when the task is selected, it will sometimes display on the left grid, and sometimes on the chart. Although it will not exactly affect what I want to achieve, but I thought that there may be some issue with this behavior?

I would like to achieve that in the event show_chart = false, to display quick_info_box when task is selected. And when show_chart = true, to display quick_info_box as per its default behavior (meaning under/above the progress bar).

I guess this is straight forward by doing something like the following…

gantt.attachEvent("onTaskSelected", function(id){
  if (!gantt.config.show_chart) {
    var quick_info = document.getElementsByClassName("gantt_cal_quick_info")[0]
    quick_info.style.left = '0px';

Thank you once again.

Hi @Joseph!
The bugfix will be out around 13-14th of May

Regarding the issue with quick info and show_chart = true - we’ve confirmed it as a bug. Quick info should be displayed over the grid if the timeline is hidden.
It will be fixed in upcoming v6.1.6 which is planned on 13-14th of May

Hi @guldmi and @Aliaksandr,

Thank you to both of you.

Hi, I have tested with gantt_6.1.6-pre2_gpl and it would seem that both bugs mentioned are resolved.

Thanks for the fix.

As for the other issue that I have mentioned

It seem that it will be invalid as the current behavior for the QuickInfo when minimized will display on the grid, and when maximized will display on the chart. So please ignore that issue.



Sorry, would like to re-visit this.

Is it possible to have the option in QuickInfo to have something like gantt.quickinfo.show = grid and gantt.quickinfo.show = chart configuration? So that when gantt.config.show_chart = true, I can still force quickinfo to display on the grid.


Hi @Joseph,

sorry for a big delay.

Yes, it makes sense. I think we can add an option for this.
I’m not sure about the global config (gantt.config.quick_info_…) since it’s already quite bloated as is.
We can probably move a quick info to a separate module, like:

- show(id: TaskID)
- show(x: number, y: number)
- hide():
- getNode()
- setContainer(container: string|HTMLElement)

That’s the initial thought, anyway. I’ve added a task to our tracker for research, maybe the final result will differ.
Right now I can’t give you a quick solution since right now other things are in active work and this feature goes to the backlog. I can’t promise any updates earlier than mid June