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

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

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