Расширение Tooltips

Более подробная информация о расширении Tooltips доступна в статье Тултипы для элементов Gantt.

Объект tooltip

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

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

К началу