项目管理工具DHTMLX Gantt灯箱元素配置教程：甘特图元素提示设置（上）

本文给大家讲解如何设置DHTMLX Gantt的甘特图元素的工具提示，欢迎大家下载最新版试用体验。

工具提示可以让您为用户添加额外信息，而不会让文本溢出屏幕。默认情况下，工具提示会添加到甘特图任务中。

您可以通过相应的 API将工具提示添加到任何甘特图元素。

1、激活

要激活任务的工具提示，请使用gantt.plugins方法启用工具提示插件：

<script>    gantt.plugins({        tooltip: true    });    gantt.init("gantt_here");</script>

激活扩展后，工具提示将自动显示为默认设置。

2、自定义文字

默认情况下，工具提示显示任务的 3 个属性：

• 任务的开始日期。
• 任务的结束日期。
• 任务名称。

要为工具提示设置自定义文本，请使用tooltip_text模板：

gantt.templates.tooltip_text = function(start,end,task){    return "<b>Task:</b> "+task.text+"<br/><b>Duration:</b> " + task.duration;};

3、工具提示API

工具提示对象

您可以访问工具提示的对象作为gantt.ext.tooltips.tooltip。该对象允许通过一组方法操作工具提示的位置、内容和可见性：

• getNode() – 返回工具提示的 HTML 元素
• setViewport() – 将工具提示的位置锁定到指定 HTML 元素的边界
• node – ( HTMLElement ) 问题下的 HTML 元素
• show() – 在特定坐标处显示工具提示（相对于 document.body）。该方法可以采用不同的参数，具体取决于您想要显示工具提示的位置：
• 要在特定坐标（相对于 document.body）处显示工具提示，请传递：左- (数字) X 坐标，top – ( number ) Y 坐标
• 要在鼠标事件坐标处显示工具提示（将考虑 tooltip_offset_x/y和视口），通过：event – ( Event ) 鼠标事件对象
• hide() – 隐藏工具提示元素
• setContent() – 将 HTML 内容放入工具提示中。作为参数：html – ( string ) 包含工具提示 HTML 内容的字符串

设置方法

有几种方法可以在将鼠标悬停在 DOM 元素上时控制工具提示的行为。

（1）甘特图.ext.tooltips.attach()

添加具有扩展配置的工具提示。该方法将带有工具提示设置的对象作为参数。可以通过该方法调整的设置如下：

selector – ( string ) 为要监听鼠标事件的元素定义 CSS 选择器

onmouseenter – （函数）当鼠标指针进入元素时调用的处理程序。参数是：event – ( Event ) 本地鼠标事件和node – ( HTMLElement ) HTML 节点

onmousemove – （函数）当鼠标指针在元素内移动时调用的处理程序。参数是：event – ( Event ) 本地鼠标事件和node – ( HTMLElement ) HTML 节点

onmouseleave – （函数）鼠标指针离开元素时调用的处理程序。参数是：event – ( Event ) 本地鼠标事件和node – ( HTMLElement ) HTML 节点

global – ( boolean ) 定义模块是监听整个页面上的鼠标事件 ( true ) 还是只监听甘特图元素内的鼠标事件 ( false )。默认情况下，该选项设置为false。

（2）甘特图.ext.tooltips.tooltipFor()

为指定的甘特图元素添加工具提示。它是attach()方法的更简化版本。该方法将带有工具提示详细信息的对象作为参数。该对象具有以下属性：

selector – ( string ) 甘特图元素的 CSS 选择器，用于添加工具提示
html – ( function ) 工具提示的模板。模板函数依次接受两个参数：event – ( Event ) 本地鼠标事件和节点- ( HTMLElement ) HTML 节点并返回带有模板的字符串。

global – ( boolean ) 可选，定义模块是监听整个页面上的鼠标事件 ( true ) 还是只监听甘特图元素内的鼠标事件 ( false )。默认情况下，该选项设置为false。

（3）甘特图.ext.tooltips.detach()

删除工具提示。作为参数，该方法采用：selector -（字符串）甘特图元素的 CSS 选择器

4、不同元素的工具提示

默认情况下，工具提示仅添加到甘特图任务，但您也可以为任何其他甘特图元素设置工具提示。例如，对于资源标记：

为此， tooltip API中有两个相应的方法：gantt.ext.tooltips.tooltipFor ()

例如，这是为时间轴刻度的单元格添加工具提示的方法：

var domHelper = gantt.utils.dom;var pos = domHelper .getRelativeEventPosition(event, gantt.$task_scale);return gantt.templates.task_date(gantt.dateFromPos(pos.x));

注：甘特图初始化完成后必须调用gantt.ext.tooltips.tooltipFor()方法。例如，您可以像这样在onGanttReady事件处理程序中指定方法：

gantt.attachEvent("onGanttReady", function () {    var tooltips = gantt.ext.tooltips;    ...    tooltips.tooltipFor({        selector: ".gantt_task_link",        html: function (event, node) {        ...        }        });    ...    gantt.init("gantt_here");});

或者您可以使用以下方式：

gantt.init("gantt_here");gantt.parse(tasks);gantt.ext.tooltips.tooltipFor({    selector: ".gantt_task_cell",    html: function (event, domElement) {        var id = event.target.parentNode.attributes['task_id'].nodeValue;        var task = gantt.getTask(id);        return task.text;    }});

该方法支持添加具有扩展配置的工具提示，以根据鼠标指针的移动调整工具提示行为。

DHTMLX Gantt享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足项目管理控件应用的所有需求，是最完善的甘特图图表库。

2022年终狂欢火热进行中，全场产品超低价，DHTMLX全系产品享8.8折！了解更多活动详情，欢迎访问网咨询在线客服。

甘特图控件交流群：764148812    欢迎进群交流讨论

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

标签：

来源：慧都