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

Для получения более подробной информации о расширении тултипов, ознакомьтесь со статьей, расположенной по адресу Тултипы для элементов Gantt.

Объект Tooltip

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

• getNode (): HTMLElement - получает HTML-элемент, представляющий тултип.
• setViewport (node): object - ограничивает положение тултипа в пределах указанного HTML-элемента.
  • node - (HTMLElement) - целевой HTML-элемент.
• show (config, top): object - делает тултип видимым в определенных координатах относительно document.body. Вы можете указать координаты x, y или объект события для позиционирования в месте события мыши. Применяются смещение тултипа и настройки области просмотра.
  • 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, с которого нужно удалить тултип.

К началу