本文給大家講解如何設置DHTMLX Gantt的甘特圖元素的工具提示，歡迎大家下載最新版試用體驗。

DHTMLX Gantt正版試用下載

1、自定義工具提示行為

可以修改工具提示的默認行為。可以通過刪除默認工具提示處理程序并添加自定義處理程序來實現：

使用gantt.ext.tooltips.detach方法從任務中刪除內置工具提示處理程序：

// remove the built-in tooltip handler from tasks
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
});

2、暫停

您可以通過相關設置配置工具提示顯示和隱藏的時間。

要指定任務的工具提示出現之前的時間段（以毫秒為單位），請使用tooltip_timeout：

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

要定義在用戶將光標移動到另一個位置后工具提示將顯示多長時間（以毫秒為單位），請使用tooltip_hide_timeout屬性：

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

3、位置

工具提示的位置可以通過以下兩個配置屬性改變其默認位置的偏移量來配置:

Tooltip_offset_x—設置工具提示位置的水平偏移量

Tooltip_offset_y—設置工具提示位置的垂直偏移量

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

4、顯示區域

在版本6.1之前，工具提示只顯示在時間軸區域內。在v6.1版本之后，工具提示的顯示不受限制，而且工具提示會跟隨鼠標指針的移動。

如果有必要，你可以在初始化Gantt之前使用下面的代碼來恢復之前的行為:

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

DHTMLX Gantt享有超十年聲譽，支持跨瀏覽器和跨平臺，性價比高，可滿足項目管理控件應用的所有需求，是最完善的甘特圖圖表庫。

慧都2022年終狂歡火熱進行中，全場產品超低價，DHTMLX全系產品享8.8折！了解更多活動詳情，歡迎訪問慧都網咨詢。

甘特圖控件交流群：764148812    歡迎進群交流討論

慧都年終狂歡季，全場產品，限時特惠，立即了解詳情！