本文給大家講解如何設置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    歡迎進群交流討論

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