参考官方文档：
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 |
|
|
| 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 ]
});
