Tooltip 提示框
上一篇
Toolbar 工具栏
下一篇
Watermark 水印
Loading...
用于在用户将鼠标悬停在图中的元素上时，显示额外的信息。Tooltip 可以帮助用户更好地理解图中的数据，提高交互体验。
const graph = new Graph({// 其他配置...plugins: [{type: 'tooltip',},],});
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| type | 插件类型 | string | tooltip | ✓ |
| key | 标识符 | string | - | |
| position | 气泡框位置 | top | bottom | left | right | top-left | top-right | bottom-left | bottom-right | top-right | |
| enable | 插件是否启用 | boolean | ((event: IElementEvent, items: NodeData | EdgeData | ComboData[]) => boolean) | true | |
| getContent | 自定义内容 | (event: IElementEvent, items: NodeData | EdgeData | ComboData[]) => Promise<HTMLElement | string> | - | |
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | |
| trigger | 触发行为 | hover | click | hover | |
| container | tooltip自定义渲染的容器 | string | HTMLElement | - | |
| offset | 偏移距离 | [number,number] | [10,10] | |
| enterable | 指针是否可以进入 | boolean | false | |
| title | 标题 | string | - | |
| style | 样式对象 | Record<string,any> | {'.tooltip': { visibility: 'hidden'}} |
只有节点使用tooltip插件
const graph = new Graph({// 其他配置...plugins: [{type: 'tooltip',enable:(e) => e.targetType === 'node';},],});
动态渲染自定义html内容
const graph = new Graph({// 其他配置...plugins: [{type: 'tooltip',trigger: 'click',getContent: (e, items) => {let result = `<h4>Custom Content</h4>`;items.forEach((item) => {result += `<p>Type: ${item.data.description}</p>`;});return result;},},],});
触发tooltip显示，可加入自定义埋点统计上报内容
const graph = new Graph({// 其他配置...plugins: [{key: 'tooltip-click',type: 'tooltip',trigger: 'click',onOpenChange: (open) => {console.log('Tooltip open change');},},],});
触发行为
'hover'：鼠标移入元素时触发'click'：鼠标点击元素时触发点击元素触发tooltip
const graph = new Graph({// 其他配置...plugins: [{key: 'tooltip-click',type: 'tooltip',trigger: 'click',},],});
展示位置 支持以下值
top: 顶部bottom: 底部left: 左侧right: 右侧top-left : 顶部靠左top-right : 顶部靠右bottom-left : 底部靠左bottom-right : 底部靠右展示在底部
const graph = new Graph({// 其他配置...plugins: [{key: 'tooltip-click',type: 'tooltip',position: 'bottom',},],});
显示位置的偏移量，以鼠标进入元素的点为基点
const graph = new Graph({// 其他配置...plugins: [{key: 'tooltip-click',type: 'tooltip',position: 'bottom',},],});
鼠标指针是否可以进入气泡框
鼠标可进入气泡框
const graph = new Graph({// 其他配置...plugins: [{key: 'tooltip-click',type: 'tooltip',enterable: true,},],});
样式对象
黑色元素背景颜色
const graph = new Graph({// 其他配置...plugins: [{key: 'tooltip-click',type: 'tooltip',style: {['.tooltip']: {backgroundColor: 'black',},},},],});
createGraph({data: {nodes: [{ id: 'node-0' },{ id: 'node-1' },{ id: 'node-2' },{ id: 'node-3' },{ id: 'node-4' },{ id: 'node-5' },],edges: [{ source: 'node-0', target: 'node-1' },{ source: 'node-0', target: 'node-2' },{ source: 'node-0', target: 'node-3' },{ source: 'node-0', target: 'node-4' },{ source: 'node-1', target: 'node-0' },{ source: 'node-2', target: 'node-0' },{ source: 'node-3', target: 'node-0' },{ source: 'node-4', target: 'node-0' },{ source: 'node-5', target: 'node-0' },],},node: { style: { fill: '#7e3feb' } },edge: { style: { stroke: '#8b9baf' } },layout: { type: 'grid' },behaviors: ['drag-canvas'],plugins: ['grid-line', { type: 'tooltip', key: 'tooltip' }],},{ width: 600, height: 300 },(gui, graph) => {const options = {type: 'tooltip',trigger: 'hover',enable: 'always',position: 'top-left',enterable: false,};const optionFolder = gui.addFolder('Tooltip Options');optionFolder.add(options, 'type').disable(true);optionFolder.add(options, 'trigger', ['click', 'hover']);optionFolder.add(options, 'enable', ['always', 'node', 'edge']);optionFolder.add(options, 'position', ['top','bottom','left','right','top-left','top-right','bottom-left','bottom-right',]);optionFolder.add(options, 'enterable');optionFolder.onChange((e) => {const { enable, ...rest } = e.object;let enableFn = () => true;if ((enable === 'node') | (enable === 'edge')) {enableFn = (e) => e.targetType === enable;}graph.updatePlugin({key: 'tooltip',enable: enableFn,...rest,});graph.render();});// const apiFolder = gui.addFolder('Contextmenu API');// const instance = graph.getPluginInstance('contextmenu');// apiFolder.add(instance, 'hide');},);
参考示例：