quickInfo Extension

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


  • show (id): void - displays the quick info popup for a specified element
    • id - (number | string) - the task ID
  • show (x, y): void - displays the quick info popup at specific coordinates
    • x - (number | string) - horizontal coordinate
    • y - (number | string) - vertical coordinate
  • hide (force): HTMLElement - 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.
    • force? - (boolean) - defines whether the quick info popup will be hidden immediately without animation
gantt.config.quick_info_detached = false;
// hide the popup after a short animation
// hide the popup immediately
  • setContainer (container): void - 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.$root
    • container - (HTMLElement | string) - container element or its ID
  • getNode (): HTMLElement | null - 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): void - puts the content into the quick info
    • config? - (object) - optional, the configuration object of a quick info which can include the following attributes:
      • taskId? - (string | number) - optional, the id of the task to which the action buttons of the quick info will be connected
      • header? - (object) - 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