Quick Info / Tooltip Extension

Gantt
#21

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!

#22

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.

#23

Hi @Joseph!

I’ve tried to reproduce your issue and fix it:
http://recordit.co/r0RwiXmWPE

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:

gantt.$grid.appendChild(quickInfo);

to this:

gantt.$grid_data.appendChild(quickInfo);
#24

Hi @guldmi,

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

#25

Hi,

Do update this thread if there is any news to this.

Thank you.

#26

Hello Joseph,
That functionality has not been implemented yet. I will notify you when it is implemented.

#27

Hi,

Is there any way to show the quick_info when it is a unscheduled_task?

An example in this snippet.
I would like to display it on the grid like the first 3 task, but if it’s unscheduled task, nothing will be shown on the chart, which then I believe, cannot grab this.

var quick_info = document.getElementsByClassName("gantt_cal_quick_info")[0]

Any other way to do so? So that I can display the quick_info on the Grid?

Thanks.

#28

Hi Joseph,
It appears to be a bug on our end, thank you for noticing it. I’ve forwarded this issue to our dev team. It will be fixed in the next bugfix release, either tomorrow or early next week.

#29

Hi @Siarhei,

Thanks for that, and for the quick fix. Appreciate that very much.

#30

Hi,

Is there a way to detect if the user click is on the expand/collapse icon?

See this snippet.

Try to click on the > to expand or collapse the tree. Notice that the QuickInfo will be shown when it is clicked. However, with that, it is ‘blocking’ the view (in a way) of the child task.

image
image881×231 15.4 KB

So what I would like to have is that if the click is on the ‘icon’ then Quickinfo should not appear. Otherwise, it should appear as it should be.

Hope I made myself clear.

#31

Hi Joseph,
Yes, you can do this, by using our built-in events (“onTaskOpened/onTaskClosed”).
API:
https://docs.dhtmlx.com/gantt/api__gantt_ontaskopened_event.html
https://docs.dhtmlx.com/gantt/api__gantt_ontaskclosed_event.html
When these evets fires you can hide quickinho using gantt.hideQuickInfo() method
API: https://docs.dhtmlx.com/gantt/api__gantt_hidequickinfo.html

gantt.attachEvent("onTaskOpened", function(id){
  setTimeout(function(){
      gantt.hideQuickInfo();
  }, 1);
  return true;
})
gantt.attachEvent("onTaskClosed", function(id){
  setTimeout(function(){
      gantt.hideQuickInfo();
  }, 1);
  return true;
})

You can see how it could be done in the following snippet: http://snippet.dhtmlx.com/ec28b964e

Also, I don’t think you need onTaskSelected handler anymore. If I understand correctly, it was needed as a workaround for the previous versions of the gantt, to display the Quick Info popup when the timeline (chart) is hidden. Now it should work out of the box and you shouldn’t need to attach the tooltip element manually

#32

Hi @Siarhei,

Thanks, it seem to work as intended at the moment.

What do you mean by that?

Are you talking about this portion?

gantt.ext.tooltips.attach()

If that is so, then I am not using this anymore.

Would also like to understand why does it need to have a timeout of 1 before hiding? I tested without timeout and it will always show the quickinfo.

gantt.attachEvent("onTaskOpened", function(id){
  //setTimeout(function(){
      gantt.hideQuickInfo();
  //}, 1);
  return true;
})
#33

Hi Joseph,
Sorry, I’ve misspoken. I meant the quick info element, not the tooltip element.
I was referring to this code from your previous snippet:

gantt.attachEvent("onTaskSelected", function(id){
  setTimeout(function(){
      var no_chart = false;
	  if (!gantt.config.show_chart) {
		gantt.config.show_chart = true;
        no_chart = true;
      }
  	  var quick_info = document.getElementsByClassName("gantt_cal_quick_info")[0]
	  gantt.$grid.appendChild(quick_info)
      quick_info.style.left = '0px';
  	  if (no_chart) gantt.config.show_chart = false;
    })
});

As far as I understand, it was a workaround needed to make quick info work when the chart is hidden. If it’s so - I believe it’s no longer needed. If you use the latest gantt, you can simply remove this code and everything should continue working.

About hideQuickInfo inside the setTimeout - it works so, because when you click the expand/collapse button of the task it also invokes the showQuickInfo from a timeout: https://github.com/DHTMLX/gantt/blob/6.2.6/codebase/sources/ext/dhtmlxgantt_quick_info.js#L123
As a result, the quick info is not yet displayed when onTaskOpened/onTaskClosed is fired and you can’t cancel the quick info timeout. So as a workaround, we set another timeout which will fire after the quick info and hide the popup from there.

#34

Hi @Siarhei,

Yes, removing it works when Chart is hidden. But I also need it to display on the Grid when the Chart is in expanded mode. Hence, removing it will not allow me to always display the QuickInfo on the Grid. Unless you have some API that allows me to set gantt.config.quickinfo = grid or similar where I can define where the QuickInfo is always shown at, otherwise, I think I still require that portion of the code.

I can’t recall what event I am tapping on at the moment, but the current code looks like this

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';
}

So that whenever it is clicked, even on the bar in the Chart, QuickInfo will always be displayed on the Grid.

Let me know if there is a better way to do this.

I see, thanks for the explanation.

1 Like
#36

Hello, is there a way to hide the tooltip for the columns on the left, and leave it just for the task lines?

#37

I have a question, my gantt chart is in a container, so when i import the tooltip it displays outside the container, and by that it is miles away from the content that is being hovered over. Is there a way to make this work inside the container?
Here’s an image showing the bug: https://imgur.com/a/sdtlyYC

Is it possible remove the chart bar for level 0 tasks
#38

Hi @Feel_the_Beats,
I reproduced the issue but still not sure that it is your situation.
Steps that I did to reproduce:
I create a simple template with a tooltip extension. (like in the attached snippet)
Put the gantt container inside another container(div.outer).
Add margin-top and padding-top attributes to the gantt container.
Hover the mouse over the task.
The tooltip position is wrong.
Snippet with reproduced issue(check HTML tab): https://snippet.dhtmlx.com/5a2509f7c
Is it the same issue that you have?
It appears to be a bug on our end, thank you for noticing it. I’ve forwarded this issue to our dev team and will inform you when this issue will be fixed.
To avoid this problem, I could advise you to use a padding-top attribute instead of a margin. Like in the following snippet:
http://snippet.dhtmlx.com/082d8554a
If you’re having a different issue, could you reproduce it in the following snippet:
https://snippet.dhtmlx.com/5a2509f7c , click the share button and send me the link?

#39

Hi @Feel_the_Beats,
The dev team has fixed the bug with the incorrect tooltip position in the version 6.3.3 :
https://docs.dhtmlx.com/gantt/whatsnew.html#633
Now the margin-top and padding-top attributes added to the gantt container don’t shift the tooltip position.
Here is the snippet to check how it works:
http://snippet.dhtmlx.com/1dd76a744

#40

Hello Joseph,
The dev team added the way to control the QuickInfo popup and moved the methods inside the gantt.ext.quickInfo object:
https://docs.dhtmlx.com/gantt/whatsnew.html#x4465x70x4466x
https://docs.dhtmlx.com/gantt/desktop__quickinfo_ext.html

#41

Hi @ramil,

Thank you for the effort for bringing this new feature.

I tested out briefly, but there is still no way to control whether to display the quickInfo in the chart or grid, am I right?

I updated previous snippet, could you show me how I can use setContainer (can I?) to set to display on the grid instead of the chart?

Also, if I use gantt.ext.quickInfo.setContent method, within the onTaskSelected, there seem to place 2 quickinfo dialog unless I use setTimeout but the same does not happen when it use gantt.ext.quickInfo.show() inside onTaskSelected