Tooltip

Overview

The Tooltip is used to display additional information when the user hovers over elements in the graph. Tooltips can help users better understand the data in the graph and enhance the interactive experience.

Use Cases

When users need to know detailed information about an element, they can use the Tooltip to display this information.
In data visualization, Tooltips can be used to display detailed information about data points in a chart, helping users better understand the data.

Basic Usage

Below is a simple example of initializing the Tooltip plugin:

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'tooltip',
    },
  ],
});

Configuration Options

Property	Description	Type	Default Value	Required
type	Plugin type	string	`tooltip`	✓
key	Identifier	string	-
position	Tooltip position	`top` \| `bottom` \| `left` \| `right` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right`	`top-right`
enable	Whether the plugin is enabled	boolean \| ((event: IElementEvent, items: NodeData \| EdgeData \| ComboData[]) => boolean)	true
getContent	Custom content	(event: IElementEvent, items: NodeData \| EdgeData \| ComboData[]) => Promise<HTMLElement \| string>	-
onOpenChange	Callback for show/hide	(open: boolean) => void	-
trigger	Trigger behavior	`hover` \| `click`	`hover`
container	Custom rendering container for tooltip	string \| HTMLElement	-
offset	Offset distance	[number,number]	[10,10]
enterable	Whether the pointer can enter	boolean	false
title	Title	string	-
style	Style object	Record<string,any>	{'.tooltip': { visibility: 'hidden'}}

enable

Whether to enable, supports passing a function to dynamically adjust the plugin logic

Only nodes use the tooltip plugin

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'tooltip',
      enable:(e) => e.targetType === 'node';
    },
  ],
});

getContent

Custom render Tooltip content, supports returning HTMLElement or string

Dynamically render custom HTML content

const graph = new Graph({
  // Other configurations...
  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;
      },
    },
  ],
});

onOpenChange

Callback for show/hide

Trigger tooltip display, can add custom buried point statistics reporting content

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      trigger: 'click',
      onOpenChange: (open) => {
        console.log('Tooltip open change');
      },
    },
  ],
});

trigger

Trigger behavior

'hover': Triggered when the mouse enters the element
'click': Triggered when the mouse clicks the element

Click the element to trigger the tooltip

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      trigger: 'click',
    },
  ],
});

position

Display position supports the following values

top: Top
bottom: Bottom
left: Left
right: Right
top-left : Top left
top-right : Top right
bottom-left : Bottom left
bottom-right : Bottom right

Display at the bottom

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      position: 'bottom',
    },
  ],
});

offset

Offset of the display position, based on the point where the mouse enters the element

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      position: 'bottom',
    },
  ],
});

enterable

Whether the mouse pointer can enter the tooltip

The mouse can enter the tooltip

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      enterable: true,
    },
  ],
});

style

Style object

Black element background color

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      style: {
        ['.tooltip']: {
          backgroundColor: 'black',
        },
      },
    },
  ],
});

Real Cases

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');
  },
);

Reference Examples:

API

Overview

Use Cases

When users need to know detailed information about an element, they can use the Tooltip to display this information.
In data visualization, Tooltips can be used to display detailed information about data points in a chart, helping users better understand the data.

Basic Usage

Below is a simple example of initializing the Tooltip plugin:

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'tooltip',
    },
  ],
});

Configuration Options

Property	Description	Type	Default Value	Required
type	Plugin type	string	`tooltip`	✓
key	Identifier	string	-
position	Tooltip position	`top` \| `bottom` \| `left` \| `right` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right`	`top-right`
enable	Whether the plugin is enabled	boolean \| ((event: IElementEvent, items: NodeData \| EdgeData \| ComboData[]) => boolean)	true
getContent	Custom content	(event: IElementEvent, items: NodeData \| EdgeData \| ComboData[]) => Promise<HTMLElement \| string>	-
onOpenChange	Callback for show/hide	(open: boolean) => void	-
trigger	Trigger behavior	`hover` \| `click`	`hover`
container	Custom rendering container for tooltip	string \| HTMLElement	-
offset	Offset distance	[number,number]	[10,10]
enterable	Whether the pointer can enter	boolean	false
title	Title	string	-
style	Style object	Record<string,any>	{'.tooltip': { visibility: 'hidden'}}

enable

Whether to enable, supports passing a function to dynamically adjust the plugin logic

Only nodes use the tooltip plugin

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'tooltip',
      enable:(e) => e.targetType === 'node';
    },
  ],
});

getContent

Custom render Tooltip content, supports returning HTMLElement or string

Dynamically render custom HTML content

const graph = new Graph({
  // Other configurations...
  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;
      },
    },
  ],
});

onOpenChange

Callback for show/hide

Trigger tooltip display, can add custom buried point statistics reporting content

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      trigger: 'click',
      onOpenChange: (open) => {
        console.log('Tooltip open change');
      },
    },
  ],
});

trigger

Trigger behavior

'hover': Triggered when the mouse enters the element
'click': Triggered when the mouse clicks the element

Click the element to trigger the tooltip

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      trigger: 'click',
    },
  ],
});

position

Display position supports the following values

top: Top
bottom: Bottom
left: Left
right: Right
top-left : Top left
top-right : Top right
bottom-left : Bottom left
bottom-right : Bottom right

Display at the bottom

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      position: 'bottom',
    },
  ],
});

offset

Offset of the display position, based on the point where the mouse enters the element

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      position: 'bottom',
    },
  ],
});

enterable

Whether the mouse pointer can enter the tooltip

The mouse can enter the tooltip

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      enterable: true,
    },
  ],
});

style

Style object

Black element background color

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      key: 'tooltip-click',
      type: 'tooltip',
      style: {
        ['.tooltip']: {
          backgroundColor: 'black',
        },
      },
    },
  ],
});

Real Cases

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');
  },
);

Reference Examples:

G6

Tooltip

G6

Tooltip

Overview

Use Cases

Basic Usage

Configuration Options

enable

getContent

onOpenChange

trigger

position

offset

enterable

style

Real Cases

API

Overview

Use Cases

Basic Usage

Configuration Options

enable

getContent

onOpenChange

trigger

position

offset

enterable

style

Real Cases

API