1 gantt.plugins({
 2    tooltip: true
 3 }); 
 4 // tooltip 自定義
 5 gantt.templates.tooltip_text = function (start, end, task) {
 6   const equipmentCodes = (task.equipmentList || []).map((v) => v.equipmentCode).join('，');
 7   const inChargeName = task.inChargeName ? task.inChargeName : '';
 8   switch
 
 (task.type) {
 9     case 'project':
10       return (
11         '<b>階段：</b> ' +
12         task.taskSpecification +
13         '<br/>' +
14         '<b>開始時間：</b> ' +
15         formatToDate(task.start_date) +
16         '<br/>' +
17         '<b>結束時間：</b> ' +
18
 
         formatToDate(task.end_date) +
19         '<br/>' +
20         '<b>持續時間：</b> ' +
21         task.duration +
22         '天'
23       );
24       break;
25     case 'task':
26       return (
27         '<b>工單：</b> ' +
28         task.taskSpecification +
29         '<br/>' +
30
 
         '<b>開始時間：</b> ' +
31         formatToDate(task.start_date) +
32         '<br/>' +
33         '<b>結束時間：</b> ' +
34         formatToDate(task.end_date) +
35         '<br/>' +
36         '<b>持續時間：</b> ' +
37         task.duration +
38         '天<br/>' +
39         '<b>關聯裝置編碼：</b>' +
40         equipmentCodes +
41         '<br/>' +
42         '<b>負責人：</b> ' +
43         inChargeName +
44         '<br/>' +
45         '<b>實際結束時間：</b> ' +
46         (task.taskCompleteTime ? formatToDate(task.taskCompleteTime) : '')
47       );
48       break;
49     case 'milestone':
50       return (
51         '<b>前置條件：</b> ' +
52         task.taskSpecification +
53         '<br/>' +
54         '<b>開始時間：</b> ' +
55         formatToDate(task.start_date) +
56         '<br/>' +
57         '<b>結束時間：</b> ' +
58         formatToDate(task.end_date) +
59         '<br/>' +
60         '<b>持續時間：</b> ' +
61         task.duration +
62         '天' +
63         '<br/>' +
64         '<b>實際結束時間：</b> ' +
65         (task.taskCompleteTime ? formatToDate(task.taskCompleteTime) : '')
66       );
67       break;
68   }
69 };

1 <div :style="getTooltipsStyle" class="gantt-customer-tooltip">
2     。。。。。。
3 </div>

 1 const ganttData = reactive<{
 2   // tooltip樣式
 3   isTooltipStatus: boolean;
 4   // tooltip詳情
 5   tooltipData: object;
 6 }>({
 7   isTooltipStatus: false,
 8   tooltipData: {
 9     pageY: 0,
10     pageX: 0,
11   },
12 });

 1 // 為指定的甘特圖元素新增工具提示。它是attach()方法的更簡化版本。該方法將帶有工具提示詳細資訊的物件作為引數
 2 gantt.ext.tooltips.tooltipFor({
 3   // 甘特元素的 CSS 選擇器，用於新增工具提示
 4   selector: '.gantt_grid [' + gantt.config.task_attribute + ']',
 5   html: (event) => {
 6     if (ganttObj.config.touch && !gantt.config.touch_tooltip) {
 7       return;
 8     }
 9 
10     const targetTaskId = gantt.locate(event);
11     if (gantt.isTaskExists(targetTaskId)) {
12       const task = gantt.getTask(targetTaskId);
13       return gantt.templates.tooltip_text(task.start_date, task.end_date, task);
14     }
15     return null;
16   },
17   // 定義模組是在整個頁面上偵聽滑鼠事件 ( true ) 還是僅在甘特元素 ( false )內偵聽。預設情況下，該選項設定為false
18   global: true,
19 });
20 gantt.ext.tooltips.attach({
21   // 甘特元素的 CSS 選擇器，用於新增工具提示
22   selector: '.gantt_grid [' + gantt.config.task_attribute + ']',
23   onmouseenter: (event) => {
24     // console.log('onmouseenter', event);
25     const targetTaskId = gantt.locate(event);
26     if (gantt.isTaskExists(targetTaskId)) {
27       const task = gantt.getTask(targetTaskId);
28       const equipmentCodes = (task.equipmentList || [])
29         .map((v) => v.equipmentCode)
30         .join('，');
31       const inChargeName = task.inChargeName ? task.inChargeName : '';
32       // return gantt.templates.tooltip_text(task.start_date, task.end_date, task);
33       ganttData.isTooltipStatus = true;
34       task.equipmentCodes = equipmentCodes;
35       task.inChargeName = inChargeName;
36       task.pageX = event.pageX;
37       task.pageY = event.pageY;
38       ganttData.tooltipData = task;
39     }
40   },
41   onmousemove: (event) => {
42     // console.log('onmousemove', event);
43   },
44   onmouseleave: (event) => {
45     // console.log('onmouseleave', event);
46     ganttData.isTooltipStatus = false;
47     ganttData.tooltipData = {
48       pageY: 0,
49       pageX: 0,
50     };
51   },
52   //  定義模組是在整個頁面上偵聽滑鼠事件 ( true ) 還是僅在甘特圖元素內部 ( false )偵聽。預設情況下，該選項設定為false。
53   global: true,
54 });

 1 ganttObj.ext.tooltips.tooltip.show = function (event) {
 2   // console.log('show', event);
 3   const targetTaskId = ganttObj.locate(event);
 4   if (ganttObj.isTaskExists(targetTaskId)) {
 5     const task = ganttObj.getTask(targetTaskId);
 6     const equipmentCodes = (task.equipmentList || [])
 7       .map((v) => v.equipmentCode)
 8       .join('，');
 9     const inChargeName = task.inChargeName ? task.inChargeName : '';
10     ganttData.isTooltipStatus = true;
11     task.equipmentCodes = equipmentCodes;
12     task.inChargeName = inChargeName;
13     task.pageX = event.pageX;
14     task.pageY = event.pageY;
15     ganttData.tooltipData = task;
16   }
17   return event;
18 };

1 // 設定tooltip的右偏移(如果是正的)
2 gantt.config.tooltip_offset_x = 300;
3 // 設定工具提示位置的頂部偏移量(如果是正的)
4 gantt.config.tooltip_offset_y = 300;
5 // 設定在隱藏工具提示之前的時間長度，以毫秒為單位
6 /*ganttObj.config.tooltip_hide_timeout = 10000;*/