Если вы используете dhtmlxScheduler 6.0 или более раннюю версию, пожалуйста, ознакомьтесь с подробностями здесь.
Чтобы отображать тултипы для событий, необходимо один раз на странице включить расширение Tooltip.
scheduler.plugins({
tooltip: true
});
После включения тултипы будут отображаться с настройками по умолчанию.
После активации расширения тултипы будут автоматически показываться с использованием стандартной конфигурации.
По умолчанию тултипы отображают три свойства события:
Чтобы изменить текст тултипа, используйте шаблон tooltip_text:
scheduler.templates.tooltip_text = function(start,end,event) {
return "<b>Event:</b> "+event.text+"<br/><b>Start date:</b> "+
scheduler.templates.tooltip_date_format(start)+"<br/>"+
"<b>End date:</b> "+scheduler.templates.tooltip_date_format(end);
};
Объект тултипа доступен как scheduler.ext.tooltips.tooltip. Он предоставляет методы для управления позицией, содержимым и видимостью тултипа:
Несколько методов позволяют управлять поведением тултипа при наведении на DOM-элементы.
Добавляет тултип с детальной конфигурацией. Принимает объект с настройками тултипа, включая:
Добавляет тултип для конкретного элемента Gantt. Это упрощённая версия attach(). Принимает объект с:
Удаляет тултип. Принимает:
По умолчанию тултипы добавляются только к событиям Gantt, но возможно назначить тултипы для любого другого элемента Gantt.
Соответствующие методы в API тултипов:
Обратите внимание, что scheduler.ext.tooltips.tooltipFor() следует вызывать после инициализации Gantt. Например, его можно разместить внутри обработчика события onSchedulerReady:
scheduler.attachEvent("onSchedulerReady", function(){
scheduler.ext.tooltips.tooltipFor({
selector: ".dhx_matrix_scell",
html: function (event, node) {
const sectionId = scheduler.getActionData(event).section;
const timeline = scheduler.getView("timeline");
var section = timeline.y_unit[timeline.order[sectionId]];
return `Tooltip for <b>${section.label}</b>`;
}
});
});
В качестве альтернативы используйте такой подход:
scheduler.init("scheduler_here");
scheduler.ext.tooltips.tooltipFor({
selector: ".dhx_matrix_scell",
html: function (event, node) {
const sectionId = scheduler.getActionData(event).section;
const timeline = scheduler.getView("timeline");
var section = timeline.y_unit[timeline.order[sectionId]];
return `Tooltip for <b>${section.label}</b>`;
}
});
Тултипы, добавленные таким образом, будут следовать за указателем мыши и учитывать настройки tooltip_offset_x, tooltip_offset_y, tooltip_timeout и tooltip_hide_timeout.
Этот метод предоставляет более продвинутую настройку поведения тултипа на основе перемещения мыши.
Вы можете изменить стандартное поведение тултипа, удалив встроенный обработчик и добавив свой собственный. Вот как это сделать:
// удаляем встроенный обработчик тултипа с задач
scheduler.ext.tooltips.detach(`[${scheduler.config.event_attribute}]`);
scheduler.ext.tooltips.tooltipFor({
selector: `[${scheduler.config.event_attribute}]`,
html: (event: MouseEvent) => {
if (scheduler.config.touch && !scheduler.config.touch_tooltip) {
return;
}
const evNode = event.target.closest(`[${scheduler.config.event_attribute}]`);
const evId = evNode.getAttribute(scheduler.config.event_attribute);
if(scheduler.getEvent(evId)){
const ev = scheduler.getEvent(evId);
return scheduler.templates.tooltip_text(ev.start_date, ev.end_date, ev);
}
return null;
},
global: false
});
Время отображения и скрытия тултипа можно настроить через параметры.
Чтобы задать задержку (в миллисекундах) перед появлением тултипа для задачи, используйте свойство tooltip_timeout:
scheduler.config.tooltip_timeout = 50;
scheduler.init("scheduler_here");
Чтобы управлять тем, как долго (в миллисекундах) тултип остается видимым после ухода курсора, используйте свойство tooltip_hide_timeout:
scheduler.config.tooltip_hide_timeout = 5000;
scheduler.init("scheduler_here");
Положение тултипа можно скорректировать, изменив значения смещений с помощью следующих параметров конфигурации:
scheduler.config.tooltip_offset_x = 30;
scheduler.config.tooltip_offset_y = 40;
scheduler.init("scheduler_here");
По умолчанию тултипы прикрепляются к document.body. При необходимости вы можете ограничить область отображения тултипа определённым контейнером до инициализации Gantt следующим образом:
scheduler.attachEvent("onSchedulerReady", function(){
var tooltips = scheduler.ext.tooltips;
tooltips.tooltip.setViewport(container);
});
scheduler.init("scheduler_here");
Наверх