툴팁은 화면에 너무 많은 텍스트를 표시하지 않고도 추가 정보를 보여주는 방법을 제공합니다. 기본적으로 툴팁은 Gantt 작업(task)에 표시됩니다.
적절한 API를 사용하여 Gantt의 모든 요소에 툴팁을 추가할 수 있습니다.
작업에 대한 툴팁을 활성화하려면, gantt.plugins 메서드를 사용하여 tooltip 플러그인을 켜기만 하면 됩니다:
<script>
gantt.plugins({ tooltip: true });
gantt.init("gantt_here");
</script>
확장 기능이 활성화되면, 기본 설정으로 툴팁이 자동으로 표시됩니다.
기본적으로 툴팁에는 작업의 세 가지 속성이 표시됩니다:
툴팁에 표시되는 텍스트를 사용자 정의하려면, tooltip_text 템플릿을 다음과 같이 사용하세요:
gantt.templates.tooltip_text = (start, end, task) =>
`<b>Task:</b> ${task.text}<br/><b>Duration:</b> ${task.duration}`;
툴팁 객체는 gantt.ext.tooltips.tooltip으로 접근할 수 있습니다. 이 객체는 툴팁의 위치, 내용, 표시 여부를 제어하는 여러 메서드를 제공합니다:
DOM 요소 위에 마우스를 올렸을 때 툴팁 동작을 제어하는 여러 메서드가 있습니다.
확장된 설정으로 툴팁을 추가합니다. 다음과 같은 설정이 포함된 객체를 받습니다:
특정 Gantt 요소에 툴팁을 추가합니다. attach()의 간단한 버전입니다. 다음과 같은 속성을 가진 객체를 받습니다:
툴팁을 제거합니다. 다음을 파라미터로 받습니다:
기본적으로 툴팁은 Gantt 작업에만 추가되지만, 리소스 마커와 같은 다른 Gantt 요소에도 적용할 수 있습니다:
여기서 툴팁 API의 두 가지 메서드가 유용합니다:
예를 들어, 타임라인 스케일 셀에 툴팁을 추가하려면:
const domHelper = gantt.utils.dom;
const pos = domHelper.getRelativeEventPosition(event, gantt.$task_scale);
return gantt.templates.task_date(gantt.dateFromPos(pos.x));
반드시 Gantt가 초기화된 후에 gantt.ext.tooltips.tooltipFor()를 호출해야 합니다. 예를 들어, onGanttReady 이벤트 핸들러 내부에서 사용할 수 있습니다:
gantt.attachEvent("onGanttReady", () => {
const tooltips = gantt.ext.tooltips;
tooltips.tooltipFor({
selector: ".gantt_task_link",
html: (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: (event, domElement) => {
const id = event.target.parentNode.getAttribute("task_id");
const task = gantt.getTask(id);
return task.text;
}
});
Related sample: Gantt. Custom tooltips for cells
이렇게 추가된 툴팁은 마우스 포인터를 따라다니며 tooltip_offset_x, tooltip_offset_y, tooltip_timeout, tooltip_hide_timeout 설정을 따릅니다.
이 메서드를 사용하면 마우스 이동에 따라 툴팁 동작을 더 세밀하게 제어할 수 있도록 상세 설정으로 툴팁을 추가할 수 있습니다.
기본 툴팁 동작을 제거하고 직접 정의할 수 있습니다:
// 작업에 대한 내장 툴팁 핸들러 제거
gantt.ext.tooltips.detach(`[${gantt.config.task_attribute}]:not(.gantt_task_row)`);
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");
툴팁의 위치는 다음 설정을 통해 수평/수직 오프셋을 조정할 수 있습니다:
gantt.config.tooltip_offset_x = 30;
gantt.config.tooltip_offset_y = 40;
gantt.init("gantt_here");
버전 6.1 이전에는 툴팁이 타임라인 영역 내에서만 표시되었습니다. v6.1부터는 툴팁이 어디서든 나타나며 마우스 포인터를 따라갑니다.
이전 동작으로 되돌리고 싶다면, Gantt 초기화 전에 다음 코드를 사용하세요:
gantt.attachEvent("onGanttReady", () => {
const tooltips = gantt.ext.tooltips;
tooltips.tooltip.setViewport(gantt.$task_data);
});
gantt.init("gantt_here");
gantt.parse(demo_tasks);
Back to top