ggEditor给节点增加提示框

参考官方文档：

https://www.yuque.com/antv/g6/plugin.tool.tooltip

在react-ggEditor使用方法：

import React from 'react';
import { Col } from 'antd';
import { Flow } from 'gg-editor';
import { withPropsAPI } from 'gg-editor';
import CustomNode from '../EditorCustomNode';
import CustomDocNode from '../EditorCustomNode/CustomDocNode';
import '@antv/g6/build/plugin.tool.tooltip';
import G6 from '@antv/g6'

const FlowMap = (props) => {
      const tooltip = new G6.Plugins['tool.tooltip']({
        dx:10,
        dy:10,
        getTooltip({item}) {
          if(item){
            const model = item.getModel();
            return `<div class="g6-tooltip">
              <b>${model.fileName}</b>
            </div>`
          }
        }
      });
      return (
        <Col span={21} className='editorContent'>
              <Flow 
                graph={{
                  plugins: [ tooltip ]
                }}
                className='flow' 
                data={props.data} />
              <CustomNode />
              <CustomDocNode />
        </Col>
      );
};

export default withPropsAPI(FlowMap);

更多的graph配置参考地址：

https://www.yuque.com/antv/g6/graph

 

提示信息 tool.tooltip

鼠标提示信息。

安装

在 HTML 中引用文件： 

<script src="https://unpkg.com/@antv/g6/build/plugin.tool.tooltip.js"></script>

在 npm 中引用：

import '@antv/g6/build/plugin.tool.tooltip';

参数

参数	说明	类型	可选值	默认值
getTooltip	自定义 tooltip 内容回调	function		Link
dx	水平偏移	number	正数	10
dy	竖直偏移	number	正数	10

使用

使用方式一：默认

实例化插件对象：

 const tooltip = new G6.Plugins['tool.tooltip']();

在实例化 Graph 时作为插件插入：

const graph = new G6.Graph({
  container: 'mountNode',
  plugins: [ tooltip ]
});
graph.node({
  tooltip(model) {
    return [
      ['id', model.id]
    ]
  }
});

 

使用方式二：自定义 

实例化插件对象：

const tooltip = new G6.Plugins['tool.tooltip']({
  getTooltip({item}) {
    const model = item.getModel();
    return '<div>this is ' + model.id + '</div>';
  }
});

在实例化 Graph 时作为插件插入：

const graph = new G6.Graph({
  container: 'mountNode',
  plugins: [ tooltip ]
});