参考官方文档:

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 ]
});

ggEditor给节点增加提示框的更多相关文章

  1. 2016-1-6第一个完整APP 私人通讯录的实现 2:增加提示用户的提示框,监听文本框

    一:在登录时弹出提示用户的提示框: 1.使用第三方框架. 2.在登陆按钮点击事件中增加如下代码: - (IBAction)loginBtnClicked { NSString *acount = se ...

  2. ASP.NET 使用AJAX让GridView的数据行显示提示框(ToolTip)

    介绍ASP.NET AJAX可以使你的web应用程序具有更丰富的功能和更多的用户响应. 本文中,我将演示如何通过ASP.NET AJAX的帮助,给像GridView这样的数据绑定控件的数据行增加pop ...

  3. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  4. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  5. 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

    在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...

  6. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  7. html+css创建提示框

    看到下面的效果了吗? 本来我们站点是用下面的图片做的背景, 但是后期当更改完框中的提示内容,并且更新内容较多的时候,发现内容溢出了,如下图: 但是背景图片不能自动拉伸,还得重新做一张背景图,这样就导致 ...

  8. Bootstrap:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  9. Eclipse输入任意字母或指定字符出现提示框

    Eclipse默认是输入"."的时候会有提示框提示对应的API. 如果想更方便的输入任意字母或者指定的符号出现提示框设置如下: 打开Eclipse,选中“Window”->& ...

随机推荐

  1. qsort 函数笔记

    函数声明 void qsort(void *base, size_t nitems, size_t size, int (*compare)(const void *, const void*)); ...

  2. 异想家纯C语言矩阵运算库

    Sandeepin最近做的项目中需要在嵌入式芯片里跑一些算法,而这些单片机性能不上不下,它能跑些简单的程序,但又还没到上Linux系统的地步.所以只好用C语言写一些在高级语言里一个函数就解决的算法了, ...

  3. DOM中的位置和大小(总结)

    [window]window对象 一.position位置 screenLeft/screenTop (适用于火狐和谷歌) screenX/screenY (适用于IE) 二.size大小 inner ...

  4. 【置顶】入驻百家号【九哥聊IT】和【九哥九嫂小日子】,欢迎关注

    欢迎大家关注. 1.关注百家号[九哥聊IT],每天专注讲解互联网最新资讯和知识分享.2.关注百家号[九哥九嫂小日子],带你看下班之外的九哥.

  5. learn more ,study less(二):整体性学习技术(下)

    随意信息的处理 随意信息,或者内容太多.太复杂的信息,都不容易理解,它们需要不同的技术.假 如你发现联想法不能帮助你理解材料,或者需要花费的时间太长,这时候处理随意信息的方 法就很适合了. 这些处理随 ...

  6. Hyper-V虚拟机设置外部网络访问

    在Hyper-V管理器中新建一个虚拟交换机,类型为 内部 ,修改名称为 nat 在虚拟机的设置页面中,将网络适配器设置为新建的虚拟交换机 nat 打开win10->控制面板->网络和共享中 ...

  7. Spring IoC 容器和 bean 对象

    程序的耦合性: 耦合性(Coupling),又叫耦合度,是对模块间关联程度的度量.耦合的强弱取决于模块间接口的复杂性.调用模块的方式以及通过界面传送数据的多少.模块间的耦合度是指模块之间的依赖关系,包 ...

  8. 用java编写代码实现关机

    public static void main(String[] args) { Runtime runtime = Runtime.getRuntime(); try { runtime.exec( ...

  9. LoadRunner参数传递给参数

    需求:使用随机函数时,需要参数化某个参数,并且后面的步骤需要使用这个参数. 方法: lr_save_string 该函数主要是将程序中的常量或变量保存为lr中的参数 lr_eval_string 从参 ...

  10. C++ STL IO流 与 Unicode (UTF-16 UTF-8) 的协同工作

    09年研究技术的大神真的好多,本文测试有很多错误,更正后发布下(可能与编辑器相关). file.imbue(locale(file.getloc(), new codecvt_utf8<wcha ...