Quick Info / Tooltip Extension

Joseph · April 19, 2019, 4:45pm

Hi,

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.

Tooltip

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.

Thanks!

guldmi · April 22, 2019, 2:31pm

Hi @Joseph !

Unfortunately, there is no onBeforeShowQuickInfo event. But you can use hideQuickInfo() method on onQuickInfo event instead.
https://docs.dhtmlx.com/gantt/api__gantt_onquickinfo_event.html
https://docs.dhtmlx.com/gantt/api__gantt_hidequickinfo.html

If you want to customize QuickInfo buttons, check the information about it here, please:
https://docs.dhtmlx.com/gantt/api__gantt_quickinfo_buttons_config.html

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.
https://docs.dhtmlx.com/gantt/api__gantt_tooltip_hide_timeout_config.html
Here is a sample:

If you want to add some style properties to the tooltip. Add them to .gantt_tooltip class. For example:
.gantt_tooltip{
z-index:100;
}

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:
https://docs.dhtmlx.com/gantt/desktop__tooltips.html#attach

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

Joseph · April 22, 2019, 4:45pm

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!

guldmi · April 23, 2019, 2:20pm

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

Joseph · April 23, 2019, 2:50pm

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!

guldmi · April 24, 2019, 3:20pm

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:

Joseph · April 24, 2019, 4:04pm

Hi @guldmi,

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

Joseph · April 25, 2019, 2:58am

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.

guldmi · April 29, 2019, 7:43am

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

Joseph · April 30, 2019, 10:27am

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.

Click on any of the task, the quick info box will appear.
Click on the Start button, the gantt message box will appear
Click cancel to close the message box
Click on the About link on top of the page
Click on the Home link on top of the page to return back to the Gantt page
Repeat Step 1
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.

guldmi · May 2, 2019, 2:33pm

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

Joseph · May 2, 2019, 3:30pm

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.

Joseph · May 2, 2019, 4:04pm

Hi @guldmi,

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

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.

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?
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.

guldmi · May 4, 2019, 9:38am

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

Aliaksandr · May 4, 2019, 12:03pm

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

Joseph · May 4, 2019, 12:32pm

Hi @guldmi and @Aliaksandr,

Thank you to both of you.

Joseph · May 8, 2019, 6:42am

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.

Joseph · May 8, 2019, 6:45am

As for the other issue that I have mentioned

I’m not sure what’s the correct behavior here. Should it be that if the chart is hidden, then quickinfo will be displayed on the grid . Then if the chart is shown, then quickinfo should be displayed on the chart . Or I can have a configurable option to state whether I want to display quickinfo on the grid , or on the chart which I think would be a really good option to have so that I can have complete control without having to do this.
var quick_info = document.getElementsByClassName("gantt_cal_quick_info")[0]
gantt.$grid.appendChild(quick_info)
quick_info.style.left = '0px';
Because with the above, sometimes the quickinfo will be displayed on the grid and sometimes on the chart which makes the behavior unpredictable.

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.

Joseph · May 10, 2019, 2:13am

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.

Aliaksandr · May 13, 2019, 4:00pm

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