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

DHTMLX Gantt正版試用下載

 工具提示可以讓您為用戶添加額外信息，而不會(huì)讓文本溢出屏幕。默認(rèn)情況下，工具提示會(huì)添加到甘特圖任務(wù)中。

您可以通過相應(yīng)的 API將工具提示添加到任何甘特圖元素。

1、激活

要激活任務(wù)的工具提示，請使用gantt.plugins方法啟用工具提示插件：

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

激活擴(kuò)展后，工具提示將自動(dòng)顯示為默認(rèn)設(shè)置。

2、自定義文字

默認(rèn)情況下，工具提示顯示任務(wù)的 3 個(gè)屬性：

• 任務(wù)的開始日期。
• 任務(wù)的結(jié)束日期。
• 任務(wù)名稱。

要為工具提示設(shè)置自定義文本，請使用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。該對象允許通過一組方法操作工具提示的位置、內(nèi)容和可見性：

• getNode() - 返回工具提示的 HTML 元素
• setViewport() - 將工具提示的位置鎖定到指定 HTML 元素的邊界
• node - ( HTMLElement ) 問題下的 HTML 元素
• show() - 在特定坐標(biāo)處顯示工具提示（相對于 document.body）。該方法可以采用不同的參數(shù)，具體取決于您想要顯示工具提示的位置：
• 要在特定坐標(biāo)（相對于 document.body）處顯示工具提示，請傳遞：左- (數(shù)字) X 坐標(biāo)，top - ( number ) Y 坐標(biāo)
• 要在鼠標(biāo)事件坐標(biāo)處顯示工具提示（將考慮 tooltip_offset_x/y和視口），通過：event - ( Event ) 鼠標(biāo)事件對象
• hide() - 隱藏工具提示元素
• setContent() - 將 HTML 內(nèi)容放入工具提示中。作為參數(shù)：html - ( string ) 包含工具提示 HTML 內(nèi)容的字符串

設(shè)置方法

有幾種方法可以在將鼠標(biāo)懸停在 DOM 元素上時(shí)控制工具提示的行為。

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

添加具有擴(kuò)展配置的工具提示。該方法將帶有工具提示設(shè)置的對象作為參數(shù)。可以通過該方法調(diào)整的設(shè)置如下：

selector - ( string ) 為要監(jiān)聽鼠標(biāo)事件的元素定義 CSS 選擇器

onmouseenter - （函數(shù)）當(dāng)鼠標(biāo)指針進(jìn)入元素時(shí)調(diào)用的處理程序。參數(shù)是：event - ( Event ) 本地鼠標(biāo)事件和node - ( HTMLElement ) HTML 節(jié)點(diǎn)

onmousemove - （函數(shù)）當(dāng)鼠標(biāo)指針在元素內(nèi)移動(dòng)時(shí)調(diào)用的處理程序。參數(shù)是：event - ( Event ) 本地鼠標(biāo)事件和node - ( HTMLElement ) HTML 節(jié)點(diǎn)

onmouseleave - （函數(shù)）鼠標(biāo)指針離開元素時(shí)調(diào)用的處理程序。參數(shù)是：event - ( Event ) 本地鼠標(biāo)事件和node - ( HTMLElement ) HTML 節(jié)點(diǎn)

global - ( boolean ) 定義模塊是監(jiān)聽整個(gè)頁面上的鼠標(biāo)事件 ( true ) 還是只監(jiān)聽甘特圖元素內(nèi)的鼠標(biāo)事件 ( false )。默認(rèn)情況下，該選項(xiàng)設(shè)置為false。

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

為指定的甘特圖元素添加工具提示。它是attach()方法的更簡化版本。該方法將帶有工具提示詳細(xì)信息的對象作為參數(shù)。該對象具有以下屬性：

selector - ( string ) 甘特圖元素的 CSS 選擇器，用于添加工具提示
html - ( function ) 工具提示的模板。模板函數(shù)依次接受兩個(gè)參數(shù)：event - ( Event ) 本地鼠標(biāo)事件和節(jié)點(diǎn)- ( HTMLElement ) HTML 節(jié)點(diǎn)并返回帶有模板的字符串。

global - ( boolean ) 可選，定義模塊是監(jiān)聽整個(gè)頁面上的鼠標(biāo)事件 ( true ) 還是只監(jiān)聽甘特圖元素內(nèi)的鼠標(biāo)事件 ( false )。默認(rèn)情況下，該選項(xiàng)設(shè)置為false。

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

刪除工具提示。作為參數(shù)，該方法采用：selector -（字符串）甘特圖元素的 CSS 選擇器

4、不同元素的工具提示

默認(rèn)情況下，工具提示僅添加到甘特圖任務(wù)，但您也可以為任何其他甘特圖元素設(shè)置工具提示。例如，對于資源標(biāo)記：

為此， tooltip API中有兩個(gè)相應(yīng)的方法：gantt.ext.tooltips.tooltipFor ()

例如，這是為時(shí)間軸刻度的單元格添加工具提示的方法：

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

注：甘特圖初始化完成后必須調(diào)用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;
    }
});

該方法支持添加具有擴(kuò)展配置的工具提示，以根據(jù)鼠標(biāo)指針的移動(dòng)調(diào)整工具提示行為。

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

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

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

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