Тултипы для элементов Gantt

Тултипы удобны для предоставления дополнительных сведений пользователям без загромождения экрана. По умолчанию тултипы уже настроены для задач Gantt.

Вы также можете добавить тултипы к другим элементам Gantt с помощью соответствующего API.

Активация

Чтобы включить тултипы для задач, необходимо активировать плагин tooltip. Это делается через метод gantt.plugins:

<script>
    gantt.plugins({         tooltip: true     });  
    gantt.init("gantt_here");
</script>

Related sample: Tooltip

После активации тултипы будут отображаться автоматически с настройками по умолчанию.

Пользовательский текст

По умолчанию тултипы показывают три свойства задачи:

Дата начала задачи.
Дата окончания задачи.
Название задачи.

Если вы хотите изменить текст, используйте шаблон tooltip_text следующим образом:

gantt.templates.tooltip_text = function(start, end, task){
    return "<b>Task:</b> " + task.text + "<br/><b>Duration:</b> " + task.duration;
};

API тултипов

Объект Tooltip

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

getNode() - Получает HTML-элемент тултипа.
setViewport() - Ограничивает позицию тултипа в пределах определенного HTML-элемента:
- node - (HTMLElement) Целевой HTML-элемент.
show() - Отображает тултип в определенных координатах относительно document.body. Метод поддерживает:
- Конкретные координаты:
  - left - (number) X координата.
  - top - (number) Y координата.
- Координаты события мыши (с учетом tooltip_offset_x/y и viewport):
  - event - (Event) Объект события мыши.
hide() - Скрывает тултип.
setContent() - Обновляет HTML-содержимое тултипа:
- html - (string) HTML-содержимое для тултипа.

Методы

Несколько методов помогают контролировать поведение тултипов при наведении на элементы DOM.

gantt.ext.tooltips.attach()

Добавляет тултип с расширенными настройками. Принимает объект со следующими параметрами конфигурации:

selector - (string) CSS селектор для элементов, к которым прикрепляются тултипы.
onmouseenter - (function) Срабатывает, когда мышь входит в элемент:
- event - (Event) Объект события мыши.
- node - (HTMLElement) HTML-элемент.
onmousemove - (function) Срабатывает, когда мышь перемещается внутри элемента:
- event - (Event) Объект события мыши.
- node - (HTMLElement) HTML-элемент.
onmouseleave - (function) Срабатывает, когда мышь выходит из элемента:
- event - (Event) Объект события мыши.
- node - (HTMLElement) HTML-элемент.
global - (boolean) Определяет, отслеживаются ли события на всей странице (true) или только внутри элемента Gantt (false, по умолчанию).

gantt.ext.tooltips.tooltipFor()

Упрощает добавление тултипа к определенному элементу Gantt. Принимает объект с:

selector - (string) CSS селектор для элемента Gantt.
html - (function) Функция-шаблон тултипа, которая принимает:
- event - (Event) Объект события мыши.
- node - (HTMLElement) HTML-элемент. и возвращает строковый шаблон.
global - (boolean) Необязательный, определяет, отслеживаются ли события глобально (true) или только внутри элемента Gantt (false, по умолчанию).

gantt.ext.tooltips.detach()

Удаляет тултип. Требует:

selector - (string) CSS селектор элемента Gantt.

Тултипы для разных элементов

Хотя тултипы обычно привязаны к задачам Gantt, вы можете применять их и к другим элементам, например, маркерам ресурсов:

Тултип для маркера ресурса

Для этого используйте API тултипов, в частности:

gantt.ext.tooltips.tooltipFor()

Вот пример добавления тултипов к ячейкам шкалы временной линии:

var domHelper = gantt.utils.dom;
var pos = domHelper.getRelativeEventPosition(event, gantt.$task_scale);
return gantt.templates.task_date(gantt.dateFromPos(pos.x));

Помните, что вызов gantt.ext.tooltips.tooltipFor() следует делать только после инициализации Gantt. Например, включите его в обработчик события onGanttReady:

gantt.attachEvent("onGanttReady", function () {
    var tooltips = gantt.ext.tooltips;
    tooltips.tooltipFor({
        selector: ".gantt_task_link",
        html: function (event, node) {
        ...
        }
        });
    gantt.init("gantt_here");
});

Related sample: Custom Tooltips

Или:

gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.ext.tooltips.tooltipFor({
    selector: ".gantt_task_cell",
    html: function (event, domElement) {
        var id = event.target.parentNode.attributes['task_id'].nodeValue;
        var task = gantt.getTask(id);
        return task.text;
    }
});

Тултипы, добавленные таким образом, будут следовать за курсором и учитывать настройки, такие как tooltip_offset_x, tooltip_offset_y, tooltip_timeout и tooltip_hide_timeout.

gantt.ext.tooltips.attach()

Этот метод предоставляет больше контроля над поведением тултипов с расширенными параметрами конфигурации.

Кастомизация поведения тултипов

Вы можете изменить поведение тултипов, удалив стандартный обработчик и определив собственный:

Используйте gantt.ext.tooltips.detach для удаления стандартного обработчика:

gantt.ext.tooltips.detach("["+gantt.config.task_attribute+"]:not(.gantt_task_row)");

Затем настройте пользовательское поведение через gantt.ext.tooltips.attach(). Например, чтобы показывать тултипы только над таблицей:

gantt.ext.tooltips.tooltipFor({
  selector: ".gantt_grid ["+gantt.config.task_attribute+"]",
  html: (event: MouseEvent) => {
     if (gantt.config.touch && !gantt.config.touch_tooltip) {
     return;
   }
 
   const targetTaskId = gantt.locate(event);
   if(gantt.isTaskExists(targetTaskId)){
     const task = gantt.getTask(targetTaskId);
     return gantt.templates.tooltip_text(task.start_date, task.end_date, task);
   }
   return null;
  },
  global: false
});

Таймаут

Вы можете контролировать, сколько времени требуется для появления или исчезновения тултипов:

Чтобы установить задержку перед показом тултипа, используйте tooltip_timeout:

gantt.config.tooltip_timeout = 50;
gantt.init("gantt_here");

Чтобы настроить, как долго тултип остается видимым после перемещения курсора, используйте tooltip_hide_timeout:

gantt.config.tooltip_hide_timeout = 5000;
gantt.init("gantt_here");

Позиция

Позицию тултипа можно настроить с помощью следующих смещений:

tooltip_offset_x - Настраивает горизонтальное смещение.
tooltip_offset_y - Настраивает вертикальное смещение.

gantt.config.tooltip_offset_x = 30;
gantt.config.tooltip_offset_y = 40;
 
gantt.init("gantt_here");

Область отображения

Начиная с версии 6.1, тултипы больше не ограничены областью временной шкалы и будут следовать за указателем мыши. Если вы предпочитаете старое поведение, вы можете вернуть его:

gantt.attachEvent("onGanttReady", function(){
    var tooltips = gantt.ext.tooltips;
    tooltips.tooltip.setViewport(gantt.$task_data);
});
 
gantt.init("gantt_here");
gantt.parse(demo_tasks);

К началу