半岛权威十大直营(官方)网站

本文给大家讲解如何设置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    欢迎进群交流讨论

慧都年终狂欢季，全场产品，限时特惠，立即了解详情！