Quick Info / Tooltip Extension

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.

Thanks!

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?

Thanks!

Hi @Joseph,

Hi ,

You can use gantt.templates.tooltip_text to control tooltips:
https://docs.dhtmlx.com/gantt/api__gantt_tooltip_text_template.html

You can use show_quick_info to activate/disable the ‘quick_info’ extension
https://docs.dhtmlx.com/gantt/api__gantt_show_quick_info_config.html

Please don’t forget to use gantt.render() method to repaint the changes:
https://docs.dhtmlx.com/gantt/api__gantt_render.html

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.

Thanks.

Hi @Joseph!
Hello,
There is no built-in Gantt chart feature to show quickinfo in the grid.
but you can do it like in this snippet:
http://snippet.dhtmlx.com/74dc8914a

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:
http://snippet.dhtmlx.com/7b00c0235

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?

Thanks.

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;
gantt.init(...);

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:
https://snippet.dhtmlx.com/c72e28510

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]
    gantt.$grid.appendChild(quick_info)
    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.

Thanks.

Hi,

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.

Thanks.

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:

gantt.ext.quickInfo:
- 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

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.

Thanks!

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) {
          gantt.$grid.appendChild(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?

Thanks.