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

DHTMLX Gantt正版試用下載

1、自定義工具提示行為

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

使用gantt.ext.tooltips.detach方法從任務(wù)中刪除內(nèi)置工具提示處理程序：

// 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、暫停

您可以通過相關(guān)設(shè)置配置工具提示顯示和隱藏的時間。

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

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

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

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

3、位置

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

Tooltip_offset_x—設(shè)置工具提示位置的水平偏移量

Tooltip_offset_y—設(shè)置工具提示位置的垂直偏移量

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

4、顯示區(qū)域

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

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

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享有超十年聲譽(yù)，支持跨瀏覽器和跨平臺，性價比高，可滿足項目管理控件應(yīng)用的所有需求，是最完善的甘特圖圖表庫。

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

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

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