工具提示 Tooltip

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

开启

const netGraph = new NetPlanGraph({
  tooltip: true,
})

// 等同于
const netGraph = new NetPlanGraph({
  tooltip: {
    enabled: true,
  }
})

自定义文本

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

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

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

const netGraph = new NetPlanGraph({
  tooltip: {
    enabled: true,
    tooltip_text: (task)=>{
      return `<div><p>任务名称：${task.name}</p></div>`
    }
  }
})

显示/隐藏时间

您可以通过相关设置配置工具提示显示和隐藏的时间。

若要指定任务的工具提示显示之前的时间段（以毫秒为单位），请使用以下tooltip_timeout：

const netGraph = new NetPlanGraph({
  tooltip: {
    enabled: true,
    tooltip_timeout: 50,
  }
})

若要定义在用户将光标移动到另一个位置后工具提示将显示多长时间（以毫秒为单位），请使用 tooltip_hide_timeout 属性：

const netGraph = new NetPlanGraph({
  tooltip: {
    enabled: true,
    tooltip_hide_timeout : 5000,
  }
})

offset 偏移位置

可以通过两个配置属性更改工具提示的默认位置偏移来配置工具提示的位置：

• tooltip_offset_x - 设置工具提示位置的水平偏移量
• tooltip_offset_y - 设置工具提示位置的垂直偏移

const netGraph = new NetPlanGraph({
  tooltip: {
    enabled: true,
    tooltip_offset_x: 20,
    tooltip_offset_x: 20,
  }
})

API

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

getNode()

返回工具提示的 HTML 元素

setViewport()

将工具提示的位置锁定到指定 HTML 元素的边界

• el（HTMLElement） 问题下的 HTML 元素

show()

在特定坐标处显示工具提示（相对于 document.body）。该方法可以采用不同的参数，具体取决于您想要显示工具提示的位置：

若要在特定坐标（相对于 document.body）处显示工具提示，请传递：

• left -（数字）X 坐标
• top -（数字）Y 坐标

要在鼠标事件坐标处显示工具提示（将考虑tooltip_offset_x/y和视口），请传递：

• event - （事件）鼠标事件对象

hide()

隐藏工具提示元素

setContent()

将 HTML 内容放入工具提示中。取为参数：

• html -（字符串）包含工具提示的 HTML 内容的字符串