quickInfo Extension

Read details about the quickInfo extension in the Quick Info (Touch Support) article.
The quickInfo object possesses the following API:


  • show(id) - displays the quick info popup for a specified element
  • show(x,y) - displays the quick info popup at specific coordinates
  • hide([force: boolean]) - hides the quick info popup. When gantt.config.quick_info_detached is set to false, the quick info will not disappear immediately, but after a short animation. Providing true value as an argument will cancel the animation and will remove the popup immediately.
gantt.config.quick_info_detached = false;
// hide the popup after a short animation
// hide the popup immediately
  • setContainer(container) - sets a container where the quick info will be displayed. If no custom container specified, QuickInfo will be placed into the first of the found nodes: gantt.$task, gantt.$grid, gantt.$layout
  • getNode() - returns the HTMLElement of the quick info popup. Returns null if the quick info is not initialized
const node = gantt.ext.quickInfo.getNode();

The returned DOM element of the shown quick info looks like:

  • setContent(config) - (object) puts the content into the quick info. It takes a configuration object of a quick info as a parameter.
    The configuration object has the following structure:
    • taskId - (string|number) optional, the id of the task to which the action buttons of the quick info will be connected
    • header - optional, the header of the pop-up edit form which may include:
      • title - (string) optional, the title of the pop-up edit form
      • date - (string) optional, the date of the pop-up edit form
    • content - (string) optional, the content of the pop-up edit form
    • buttons - (string[]) optional, buttons to be placed in the pop-up edit form
      If neither header nor buttons are specified, the related areas of the quick info popup will be hidden.

Here is what the configuration object of the setContent method can look like:

const quickInfo = gantt.ext.quickInfo;
var task = gantt.getTask(10);
    taskId: task.id,
    header: {
        title: gantt.templates.quick_info_title(task.start_date, task.end_date, task),
        date: gantt.templates.quick_info_date(task.start_date, task.end_date, task)
    content: gantt.templates.quick_info_content(task.start_date, task.end_date, task),
    buttons: gantt.config.quickinfo_buttons


You can create a custom pop-up without a header and buttons:

const quickInfo = gantt.ext.quickInfo;
quickInfo.show(100, 100);
    content: "my custom html",
    buttons: []
Back to top