Quick Info / Tooltip Extension


Hello @Joseph,

Regarding the first question:
You can specify the container for the quick-info popup using the “setContainer()” method. In order to set the “grid” as a container, you can use the syntax from our documentation(gantt.$grid):


or you can get the grid element using jquery selector, like in the fragment below:

gantt.attachEvent("onTaskSelected", function(id){
  var gridElement = document.querySelector(".gantt_grid_data")


Here is a demo:

You can change the styles of the popup using the “.gantt_cal_quick_info” selector.

Reading the second question:

The behavior with “2 quick info dialogs” that you have occurred, was the result of using both:

	quick_info: true,

in the “CODE” part of the snippet, and:

<script src="https://docs.dhtmlx.com/gantt/codebase/ext/dhtmlxgantt_quick_info.js?v=20180322"></script>

in the “HTML” part.

So they were two different dialogs from two “different” extensions. When you will remove the extension, which is added in the script tag, the issue will be fixed.


I want to, If task type is a project Quick Info should be hidden,.
If task type is not a project Quick Info should be show.

how can I do it?


You can try using the quick_info_class template:
There, you can check the task type and return a custom class name. In the style rules, you use the display: none property to hide the Quick Info.
Here is an example of how it works: