工具提示扩展

有关工具提示扩展的更多信息，请参见文章 Gantt 元素的工具提示。

Tooltip 对象

Tooltip 对象可通过 gantt.ext.tooltips.tooltip 访问。它提供了控制工具提示位置、内容和可见性的方法：

getNode (): HTMLElement - 返回工具提示的 HTML 元素
setViewport (node): object - 限制工具提示在指定 HTML 元素边界内显示
- node - (HTMLElement) - 用于约束工具提示的 HTML 元素
show (config, top): object - 在指定坐标处显示工具提示（相对于 document.body）。该方法根据期望的位置接受不同的参数。若要在特定坐标显示工具提示，请提供 x 和 y 的值。若要在鼠标事件位置显示，请传入 Event 对象。tooltip_offset_x/y 和 viewport 设置会自动应用。
- config? - (number | Event) - x 坐标或鼠标事件对象
- top? - (number) - y 坐标
hide (): object - 隐藏工具提示
setContent (html): object - 设置工具提示中的 HTML 内容
- html - (string) - 在工具提示中显示的 HTML 字符串

方法

提供了多种方法用于管理悬停在 DOM 元素上的工具提示行为。

gantt.ext.tooltips.attach()

attach (config): void - 以详细配置方式绑定工具提示。它接受一个参数：
- config - (object) - 工具提示的配置对象，包括：
  - selector - (string) - 需要监听鼠标事件的元素的 CSS 选择器
  - onmouseenter - (Function): void - 鼠标进入元素时调用，参数包括：
    - event - (MouseEvent) - 原生鼠标事件
    - node - (HTMLElement) - 目标 HTML 节点
  - onmousemove? - (Function): void - （可选）鼠标在元素内移动时调用，参数包括：
    - event - (MouseEvent) - 原生鼠标事件
    - node - (HTMLElement) - 目标 HTML 节点
  - onmouseleave - (Function): void - 鼠标离开元素时调用，参数包括：
    - event - (MouseEvent) - 原生鼠标事件
    - node - (HTMLElement) - 目标 HTML 节点
  - global? - (boolean) - （可选）若为 true，则监听整个页面的鼠标事件；若为 false，则只在 gantt 元素内监听。默认为 false。

gantt.ext.tooltips.attach({
    selector: ".gantt_task_cell",
    onmouseenter: function (e, node) {
        const id = node.parentNode.attributes['task_id'].nodeValue;
        const task = gantt.getTask(id);
 
        if (typeof task.text == "string") {
            gantt.ext.tooltips.tooltip.setContent(task.text);
            gantt.ext.tooltips.tooltip.show(e.clientX + 20, e.clientY + 20)
        }
    },
    onmousemove: function (e, node) {
        gantt.ext.tooltips.tooltip.show(e.clientX + 20, e.clientY + 20)
    },
    onmouseleave: function (e, node) {
        gantt.ext.tooltips.tooltip.hide()
    },
})

gantt.ext.tooltips.tooltipFor()

tooltipFor (config): void - 为特定 Gantt 元素添加工具提示。这是 attach() 的简化替代方法。它接受一个参数：
- config - (object) - 配置对象，包括：
  - selector - (string) - 需要绑定工具提示的 Gantt 元素的 CSS 选择器
  - html - (Function): HTMLElement | string | number | void - 返回工具提示内容的函数。接收参数：
    - event - (Event) - 原生鼠标事件
    - node - (HTMLElement) - HTML 节点，并返回包含工具提示内容的字符串
  - global? - (boolean) - （可选）若为 true，则监听整个页面；若为 false，则只在 gantt 元素内监听。默认为 false。

gantt.ext.tooltips.tooltipFor({
    selector: ".gantt_task_cell",
    html: function (e, domElement) {
        const id = domElement.parentNode.attributes['task_id'].nodeValue;
        const task = gantt.getTask(id);
        return task.text;
    }
});

gantt.ext.tooltips.detach()

detach (selector): void - 移除指定元素的工具提示。它接受一个参数：
- selector - (string) - Gantt 元素的 CSS 选择器