diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts
index accb02e85de..40c9a695216 100644
--- a/packages/g6/__tests__/demos/index.ts
+++ b/packages/g6/__tests__/demos/index.ts
@@ -142,6 +142,7 @@ export { pluginToolbarBuildIn } from './plugin-toolbar-build-in';
export { pluginToolbarIconfont } from './plugin-toolbar-iconfont';
export { pluginTooltip } from './plugin-tooltip';
export { pluginTooltipDual } from './plugin-tooltip-dual';
+export { pluginTooltipEnable } from './plugin-tooltip-enable';
export { pluginWatermark } from './plugin-watermark';
export { pluginWatermarkImage } from './plugin-watermark-image';
export { theme } from './theme';
diff --git a/packages/g6/__tests__/demos/plugin-tooltip-enable.ts b/packages/g6/__tests__/demos/plugin-tooltip-enable.ts
new file mode 100644
index 00000000000..bfdda87c687
--- /dev/null
+++ b/packages/g6/__tests__/demos/plugin-tooltip-enable.ts
@@ -0,0 +1,37 @@
+import type { ElementDatum, IElementEvent } from '@antv/g6';
+import { Graph } from '@antv/g6';
+
+export const pluginTooltipEnable: TestCase = async (context) => {
+ const graph = new Graph({
+ ...context,
+ data: {
+ nodes: [
+ { id: 'node1', style: { x: 150, y: 100 }, data: { type: 'test1', desc: 'This is a tooltip' } },
+ { id: 'node2', style: { x: 150, y: 200 }, data: { type: 'test1', desc: '' } },
+ { id: 'node3', style: { x: 150, y: 300 }, data: { type: 'test2', desc: 'This is a tooltip' } },
+ ],
+ },
+ node: {
+ style: {
+ labelText: (d) => d.id,
+ },
+ },
+ plugins: [
+ {
+ key: 'tooltip',
+ type: 'tooltip',
+ trigger: 'click',
+ enable: (e: IElementEvent, items: ElementDatum[]) => {
+ return items[0].data?.type === 'test1';
+ },
+ getContent: (evt: IElementEvent, items: ElementDatum[]) => {
+ return items[0].data?.desc || '';
+ },
+ },
+ ],
+ });
+
+ await graph.render();
+
+ return graph;
+};
diff --git a/packages/g6/__tests__/unit/plugins/tooltip.spec.ts b/packages/g6/__tests__/unit/plugins/tooltip.spec.ts
index d65456551eb..ff5ad4b434b 100644
--- a/packages/g6/__tests__/unit/plugins/tooltip.spec.ts
+++ b/packages/g6/__tests__/unit/plugins/tooltip.spec.ts
@@ -1,6 +1,6 @@
import type { Tooltip } from '@/src';
import { ComboEvent, EdgeEvent, NodeEvent, idOf } from '@/src';
-import { pluginTooltip } from '@@/demos';
+import { pluginTooltip, pluginTooltipEnable } from '@@/demos';
import { createDemoGraph } from '@@/utils';
describe('plugin tooltip', () => {
@@ -50,4 +50,29 @@ describe('plugin tooltip', () => {
await expect(graph).toMatchSnapshot(__filename, 'show-tooltip-by-id');
graph.destroy();
});
+
+ it('enable', async () => {
+ const graph = await createDemoGraph(pluginTooltipEnable);
+ const container = graph.getCanvas().getContainer()!;
+ const el = container.querySelector('.tooltip') as HTMLDivElement;
+
+ graph.emit(NodeEvent.CLICK, { targetType: 'node', target: { id: 'node3' } });
+ expect(el.style.visibility).toBe('hidden');
+
+ graph.emit(NodeEvent.CLICK, { targetType: 'node', target: { id: 'node1' } });
+ expect(el.style.visibility).toBe('visible');
+
+ graph.destroy();
+ });
+
+ it('get content null', async () => {
+ const graph = await createDemoGraph(pluginTooltipEnable);
+ const container = graph.getCanvas().getContainer()!;
+ const el = container.querySelector('.tooltip') as HTMLDivElement;
+
+ graph.emit(NodeEvent.CLICK, { targetType: 'node', target: { id: 'node2' } });
+ expect(el.style.visibility).toBe('hidden');
+
+ graph.destroy();
+ });
});
diff --git a/packages/g6/src/plugins/tooltip.ts b/packages/g6/src/plugins/tooltip.ts
index d9539a99c0d..536c0759115 100644
--- a/packages/g6/src/plugins/tooltip.ts
+++ b/packages/g6/src/plugins/tooltip.ts
@@ -38,7 +38,7 @@ export interface TooltipOptions
* Is enable
* @defaultValue true
*/
- enable?: boolean | ((event: IElementEvent) => boolean);
+ enable?: boolean | ((event: IElementEvent, items: ElementDatum[]) => boolean);
/**
* 显示隐藏的回调
*
@@ -147,10 +147,10 @@ export class Tooltip extends BasePlugin {
});
}
- private isEnable = (event: IElementEvent) => {
+ private isEnable = (event: IElementEvent, items: ElementDatum[]) => {
const { enable } = this.options;
if (typeof enable === 'function') {
- return enable(event);
+ return enable(event, items);
}
return enable;
};
@@ -249,25 +249,17 @@ export class Tooltip extends BasePlugin {
target: { id },
} = event;
if (isToBeDestroyed(event.target)) return;
- if (!this.tooltipElement || !this.isEnable(event)) return;
const targetType = this.context.graph.getElementType(id);
const { getContent, title } = this.options;
- this.currentTarget = id;
const items: ElementDatum[] = this.getElementData(id, targetType as ElementType);
- let x;
- let y;
- if (client) {
- x = client.x;
- y = client.y;
- } else {
- const style = get(items, '0.style', { x: 0, y: 0 });
- x = style.x;
- y = style.y;
- }
+
+ if (!this.tooltipElement || !this.isEnable(event, items)) return;
+
let tooltipContent: { [key: string]: unknown } = {};
if (getContent) {
tooltipContent.content = getContent(event, items);
+ if (!tooltipContent.content) return;
} else {
const style = this.context.graph.getElementRenderStyle(id);
const color = targetType === 'node' ? style.fill : style.stroke;
@@ -282,6 +274,20 @@ export class Tooltip extends BasePlugin {
}),
};
}
+
+ this.currentTarget = id;
+
+ let x;
+ let y;
+ if (client) {
+ x = client.x;
+ y = client.y;
+ } else {
+ const style = get(items, '0.style', { x: 0, y: 0 });
+ x = style.x;
+ y = style.y;
+ }
+
this.options.onOpenChange?.(true);
this.tooltipElement.update({
...this.tooltipStyleProps,