Расширение тултипов

Подробнее об расширении тултипов читайте в статье Тултипы для элементов Gantt.

Объект тултипа

Вы можете получить доступ к объекту тултипа как gantt.ext.tooltips.tooltip. Этот объект позволяет управлять позицией, содержимым и видимостью тултипа с помощью набора методов:

• getNode (): HTMLElement - возвращает HTML-элемент тултипа
• setViewport (node): object - фиксирует положение тултипа в границах указанного HTML-элемента
  • node - (HTMLElement) - HTML-элемент под вопросом
• show (config, top): object - отображает тултип в заданных координатах (относительно document.body). Метод может принимать различные параметры в зависимости от положения, в котором вы хотите показать тултип. Чтобы отобразить тултип в конкретных координатах (относительно document.body), передайте координаты x, y. Чтобы отобразить тултип по координатам события мыши — передайте объект Event. Значения tooltip_offset_x/y и viewport будут учтены.
  • config? - (number | Event) - X-координата или объект события мыши
  • top? - (number) - Y-координата
• hide (): object - скрывает элемент тултипа
• setContent (html): object - помещает HTML-содержимое в тултип. В качестве параметра принимает:
  • html - (string) - строка с HTML-содержимым для тултипа

Методы

Существует несколько методов, которые позволяют управлять поведением тултипа при наведении на элементы DOM.

gantt.ext.tooltips.attach()

• attach (config): void - добавляет тултип с расширенной конфигурацией. Метод принимает один параметр:
  • config - (object) - объект с настройками тултипа. Настройки следующие:
    • selector - (string) - CSS-селектор для элементов, на которых будет слушаться событие мыши
    • onmouseenter - (Function): void - обработчик, вызываемый, когда указатель мыши входит в элемент. Параметры:
      • event - (MouseEvent) - нативное событие мыши
      • node - (HTMLElement) - HTML-узел
    • onmousemove? - (Function): void - необязательный обработчик, вызываемый при перемещении указателя мыши внутри элемента. Параметры:
      • event - (MouseEvent) - нативное событие мыши
      • node - (HTMLElement) - HTML-узел
    • onmouseleave - (Function): void - обработчик, вызываемый, когда указатель мыши покидает элемент. Параметры:
      • event - (MouseEvent) - нативное событие мыши
      • node - (HTMLElement) - HTML-узел
    • global? - (boolean) - необязательный, определяет, слушает ли модуль события мыши по всей странице (true) или только внутри элемента Gantt (false). По умолчанию значение 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 - добавляет тултип к указанному элементу Gantt. Это более упрощенная версия метода attach(). Метод принимает один параметр:
  • config - (object) - объект с настройками тултипа. Настройки следующие:
    • selector - (string) - CSS-селектор элемента Gantt, к которому нужно добавить тултип
    • html - (Function): HTMLElement | string | number | void - шаблон для тултипа. Функция-шаблон принимает два параметра в свою очередь:
      • event - (Event) - нативное событие мыши
      • node - (HTMLElement) - HTML-узел и возвращает строку-шаблон.
    • global? - (boolean) - необязательный, определяет, слушает ли модуль события мыши по всей странице (true) или только внутри элемента Gantt (false). По умолчанию значение 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 - удаляет тултип. В качестве параметра метод принимает:
  • selector - (string) - CSS-селектор элемента Gantt