antv G6之tooltip

---

前言

项目需求：使用antv G6 treegraph画的一棵树，要求每个节点鼠标hover上去的时候展示节点名称及权重

---

一、内置behavior:tooltip

1.与使用点击事件的behavior一样，同样是内置behavior，都在创建画布的modes中进行配置

const graph = new G6.TreeGraph({
//画布容器
  container: container,
  //宽高我在前面进行了统一配置
  width,
  height,
  modes: {
    default: [
    //这里是我配置的画布拖动以及缩放
    "drag-canvas",
    "zoom-canvas",
    //下面是配置tooltip
      {
        type: 'tooltip',
        formatText(model) {
          return `<ul>
                      <li>节点: ${model.indexName}(${model.score})</li>
                      </ul>
                      <ul>
                      <li>权重: ${model.weight || ""}</li>
                       </ul>`;
        },
        offset: 10,
      },
    ],
  },
});

二、插件tooltip

1.除了内置behavior的tooltip还可以采用插件的方式，自定义tooltip然后在创建画布时进行配置

代码如下（示例）：

const tooltip = new G6.Tooltip({
  offsetX: 10,
  offsetY: 20,
  // 允许出现 tooltip 的 item 类型
  itemTypes: ['node']
  // 自定义 tooltip 内容
  getContent(e) {
    const outDiv = document.createElement('div');
    outDiv.style.width = 'fit-content';
    outDiv.innerHTML = `
      <ul>
      <li>节点名称: ${e.item.getModel().indexName || e.item.getModel().id}</li>
       </ul>
       <ul>
       <li>权重: ${e.item.getModel().weight || ""}</li>
      </ul>`
    return outDiv
  },
});

2.配置tooltip插件

代码如下（示例）：

const graph = new G6.TreeGraph({
  //... 其他配置项
  plugins: [tooltip], // 配置 Tooltip 插件
});

官网说G6 4.0以后会用插件形式代替内置behavior的tooltip。