Tooltips Extension

Read details about the Tooltips extension in the article Tooltips for Gantt Elements.

Tooltip object

You can access the object of tooltip as gantt.ext.tooltips.tooltip. This object allows manipulating the position, content and visibility of tooltip via a set of methods:

getNode (): HTMLElement - returns the HTML element of the tooltip
setViewport (node): object - locks the position of tooltip to the boundaries of the specified HTML element
- node - (HTMLElement) - the HTML element under the question
show (config, top): object - displays the tooltip at specific coordinates (relative to document.body). The method can take different parameters, depending on the position you want to show the tooltip at. To display tooltip at specific coordinates (relative to document.body), pass x,y coordinates. To display tooltip at the mouse event coordinates pass the Event object. The tooltip_offset_x/y and viewport will be taken into account.
- config? - (number | Event) - the X coordinate or the mouse event object
- top? - (number) - the Y coordinate
hide (): object - hides the tooltip element
setContent (html): object - puts HTML content into the tooltip. Takes as a parameter:
- html - (string) - a string with HTML content for the tooltip

Methods

There are several methods that allow controlling behavior of the tooltip while hovering over DOM elements.

gantt.ext.tooltips.attach()

attach (config): void - adds tooltip with extended configuration. The method takes one parameter:
- config - (object) - an object with the tooltip settings. The settings are:
  - selector - (string) - defines CSS-selector for the elements to listen to mouse events on
  - onmouseenter - (Function): void - a handler called when the mouse pointer enters the element. The parameters are:
    - event - (MouseEvent) - a native mouse event
    - node - (HTMLElement) - the HTML node
  - onmousemove? - (Function): void - optional, a handler called when the mouse pointer moves inside the element. The parameters are:
    - event - (MouseEvent) - a native mouse event
    - node - (HTMLElement) - the HTML node
  - onmouseleave - (Function): void - a handler called when the mouse pointer leaves the element. The parameters are:
    - event - (MouseEvent) - a native mouse event
    - node - (HTMLElement) - the HTML node
  - global? - (boolean) - optional, defines whether the module listens to mouse events on the whole page (true) or only inside a gantt element (false). By default the option is set to false.

gantt.ext.tooltips.attach({
    selector: ".gantt_task_cell",
    onmouseenter: function (e, node) {
        const id = node.parentNode.attributes['task_id'].nodeValue;
        const task = gantt.getTask(id);
 
        if (typeof task.text == "string") {
            gantt.ext.tooltips.tooltip.setContent(task.text);
            gantt.ext.tooltips.tooltip.show(e.clientX + 20, e.clientY + 20)
        }
    },
    onmousemove: function (e, node) {
        gantt.ext.tooltips.tooltip.show(e.clientX + 20, e.clientY + 20)
    },
    onmouseleave: function (e, node) {
        gantt.ext.tooltips.tooltip.hide()
    },
})

gantt.ext.tooltips.tooltipFor()

tooltipFor (config): void - adds a tooltip for the specified Gantt element. It is a more simplified version of the attach() method. The method takes one parameter:
- config - (object) - an object with the tooltip settings. The settings are:
  - selector - (string) - a CSS-selector of the Gantt element to add a tooltip to
  - html - (Function): HTMLElement | string | number | void - a template for the tooltip. The template function takes two parameters in its turn:
    - event - (Event) - a native mouse event
    - node - (HTMLElement) - the HTML node and returns a string with a template.
  - global? - (boolean) - optional, defines whether the module listens to mouse events on the whole page (true) or only inside a gantt element (false). By default the option is set to false.

gantt.ext.tooltips.tooltipFor({
    selector: ".gantt_task_cell",
    html: function (e, domElement) {
        const id = domElement.parentNode.attributes['task_id'].nodeValue;
        const task = gantt.getTask(id);
        return task.text;
    }
});

gantt.ext.tooltips.detach()

detach (selector): void - removes tooltip. As a parameter the method takes:
- selector - (string) - the CSS selector of a Gantt element