Skip to content
G6

Tooltip

View MarkdownEdit this page

Overview

The Tooltip plugin is used to display additional information when users hover over or click on elements in the graph. It helps users better understand the data in the graph and improves the interactive experience.

Use Cases

  • Detailed Information Display: When users need to understand detailed information about elements, use Tooltip to display this information
  • Data Visualization Assistance: In data visualization, Tooltip can display detailed information about data points in charts, helping users better understand the data
  • Interactive Feedback: Provide immediate visual feedback for user mouse operations

Basic Usage

The simplest Tooltip plugin configuration:

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 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 Show/hide callback (open: boolean) => void -
trigger Trigger behavior hover | click hover
container Custom render container string | HTMLElement -
offset Offset distance [number,number] [10,10]
enterable Whether pointer can enter boolean false
title Title string -
style Style object Record<string,any> {‘.tooltip’: { visibility: ‘hidden’}}

Detailed Configuration

enable - Conditional Enable

Controls whether the plugin is enabled, supports passing functions to dynamically adjust enable logic.

Example: Enable Tooltip only for nodes


import { Graph } from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', style: { x: 100, y: 100 }, data: { name: 'Server Node' } },
    { id: 'node2', style: { x: 200, y: 100 }, data: { name: 'Database Node' } },
  ],
  edges: [{ source: 'node1', target: 'node2', data: { type: 'Connection' } }],
};

const graph = new Graph({
  container: 'container',
  width: 400,
  height: 200,
  data,
  plugins: [
    {
      type: 'tooltip',
      // Enable only for nodes, not for edges
      enable: (e) => e.targetType === 'node',
      getContent: (e, items) => {
        return `<div>Node: ${items[0].data.name}</div>`;
      },
    },
  ],
});

graph.render();

getContent - Custom Content

Customize Tooltip content rendering, supports returning HTMLElement or string.

Example: Dynamically render custom HTML content


import { Graph } from '@antv/g6';

const data = {
  nodes: [
    {
      id: 'node1',
      style: { x: 100, y: 100 },
      data: { name: 'Server A', type: 'Application Server', status: 'Running', cpu: '45%', memory: '2.1GB' },
    },
    {
      id: 'node2',
      style: { x: 250, y: 100 },
      data: { name: 'Database B', type: 'MySQL Database', status: 'Normal', connections: 23, size: '500MB' },
    },
  ],
  edges: [{ source: 'node1', target: 'node2', data: { bandwidth: '1Gbps', latency: '5ms' } }],
};

const graph = new Graph({
  container: 'container',
  width: 400,
  height: 200,
  data,
  plugins: [
    {
      type: 'tooltip',
      getContent: (e, items) => {
        const item = items[0];

        if (e.targetType === 'node') {
          return `
            <div>
              <h4 style="margin: 0 0 8px 0; color: #333; border-bottom: 1px solid #eee; padding-bottom: 4px;">
                ${item.data.name}
              </h4>
              <div style="margin: 4px 0; color: #666;">
                <strong>Type:</strong> ${item.data.type}
              </div>
              <div style="margin: 4px 0; color: #666;">
                <strong>Status:</strong>
                <span style="color: ${item.data.status === 'Running' || item.data.status === 'Normal' ? '#52c41a' : '#ff4d4f'}">
                  ${item.data.status}
                </span>
              </div>
              ${item.data.cpu ? `<div style="margin: 4px 0; color: #666;"><strong>CPU:</strong> ${item.data.cpu}</div>` : ''}
              ${item.data.memory ? `<div style="margin: 4px 0; color: #666;"><strong>Memory:</strong> ${item.data.memory}</div>` : ''}
              ${item.data.connections ? `<div style="margin: 4px 0; color: #666;"><strong>Connections:</strong> ${item.data.connections}</div>` : ''}
              ${item.data.size ? `<div style="margin: 4px 0; color: #666;"><strong>Size:</strong> ${item.data.size}</div>` : ''}
            </div>
          `;
        } else if (e.targetType === 'edge') {
          return `
            <div>
              <h4 style="margin: 0 0 8px 0; color: #333;">Connection Info</h4>
              <div style="margin: 4px 0; color: #666;"><strong>Bandwidth:</strong> ${item.data.bandwidth}</div>
              <div style="margin: 4px 0; color: #666;"><strong>Latency:</strong> ${item.data.latency}</div>
            </div>
          `;
        }

        return 'No information available';
      },
    },
  ],
});

graph.render();

trigger - Trigger Mode

Controls the trigger behavior of Tooltip.

Available values:

  • hover: Trigger when mouse enters element (default)
  • click: Trigger when mouse clicks element

Example: Click-triggered Tooltip


import { Graph } from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', style: { x: 100, y: 100 }, data: { name: 'Click me' } },
    { id: 'node2', style: { x: 200, y: 100 }, data: { name: 'Click me too' } },
  ],
  edges: [{ source: 'node1', target: 'node2' }],
};

const graph = new Graph({
  container: 'container',
  width: 350,
  height: 200,
  data,
  node: {
    style: {
      labelText: (d) => d.data.name,
    },
  },
  plugins: [
    {
      type: 'tooltip',
      trigger: 'click',
      getContent: (e, items) => {
        return `
          <div>
            <div style="color: #0369a1; font-weight: bold; margin-bottom: 4px;">
              Click Triggered 🖱️
            </div>
            <div style="color: #0c4a6e;">
              Element ID: ${items[0].id}<br/>
              Name: ${items[0].data?.name || 'Unnamed'}
            </div>
          </div>
        `;
      },
    },
  ],
});

graph.render();

position - Display Position

Controls the display position of Tooltip relative to mouse position.

Available values:

  • top: Top
  • bottom: Bottom
  • left: Left
  • right: Right
  • top-left: Top left
  • top-right: Top right (default)
  • bottom-left: Bottom left
  • bottom-right: Bottom right

Example: Tooltips at different positions


import { Graph } from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', style: { x: 100, y: 100 }, data: { label: 'TOP' } },
    { id: 'node2', style: { x: 250, y: 100 }, data: { label: 'BOTTOM' } },
    { id: 'node3', style: { x: 100, y: 250 }, data: { label: 'LEFT' } },
    { id: 'node4', style: { x: 250, y: 250 }, data: { label: 'RIGHT' } },
  ],
};

const graph = new Graph({
  container: 'container',
  width: 800,
  height: 400,
  data,
  node: { style: { labelText: (d) => d.data.label } },
  plugins: [
    {
      key: 'tooltip-top',
      type: 'tooltip',
      position: 'top',
      enable: (e, items) => items[0].id === 'node1',
      getContent: () => `Display at top ⬆️`,
      style: {
        '.tooltip': {
          background: ' #fff2e8',
          border: '1px solid #ffa940',
          borderRadius: 4,
        },
      },
    },
    {
      key: 'tooltip-bottom',
      type: 'tooltip',
      position: 'bottom',
      enable: (e, items) => items[0].id === 'node2',
      getContent: () => `Display at bottom ⬇️`,
      style: {
        '.tooltip': {
          background: '#f6ffed',
          border: '1px solid #73d13d',
          borderRadius: 4,
        },
      },
    },
    {
      key: 'tooltip-left',
      type: 'tooltip',
      position: 'left',
      enable: (e, items) => items[0].id === 'node3',
      getContent: () => `Display at left ⬅️`,
      style: {
        '.tooltip': {
          background: '#fff1f0',
          border: '1px solid #ff7875',
          borderRadius: 4,
        },
      },
    },
    {
      key: 'tooltip-right',
      type: 'tooltip',
      position: 'right',
      enable: (e, items) => items[0].id === 'node4',
      getContent: () => `Display at right ➡️`,
      style: {
        '.tooltip': {
          background: '#f0f5ff',
          border: '1px solid #597ef7',
          borderRadius: 4,
        },
      },
    },
  ],
});

graph.render();

offset - Offset

Set the offset for Tooltip display position, with mouse position as the base point.


import { Graph } from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', style: { x: 100, y: 100 }, data: { label: 'Default offset' } },
    { id: 'node2', style: { x: 250, y: 100 }, data: { label: 'Custom offset' } },
  ],
};

const graph = new Graph({
  container: 'container',
  width: 800,
  height: 200,
  data,
  plugins: [
    {
      key: 'tooltip-default',
      type: 'tooltip',
      enable: (e, items) => items[0].id === 'node1',
      getContent: () => `Default offset [10,10]`,
    },
    {
      key: 'tooltip-custom',
      type: 'tooltip',
      offset: [30, -10], // Offset 30px to the right, 10px up
      enable: (e, items) => items[0].id === 'node2',
      getContent: () => `Custom offset [30,-10]`,
    },
  ],
});

graph.render();

enterable - Mouse Enterable

Controls whether the mouse pointer can enter the tooltip box, commonly used for scenarios requiring interaction within the Tooltip.


import { Graph } from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', style: { x: 100, y: 100 }, data: { name: 'User A', email: 'usera@example.com' } },
    { id: 'node2', style: { x: 250, y: 100 }, data: { name: 'User B', email: 'userb@example.com' } },
  ],
};

const graph = new Graph({
  container: 'container',
  width: 400,
  height: 200,
  data,
  plugins: [
    {
      type: 'tooltip',
      enterable: true,
      position: 'right',
      getContent: (e, items) => {
        const item = items[0];
        return `
          <div>
            <h4 style="margin: 0 0 12px 0; color: #333;">User Actions</h4>
            <div style="margin-bottom: 8px; color: #666;">
              <strong>Name:</strong> ${item.data.name}
            </div>
            <div style="margin-bottom: 12px; color: #666;">
              <strong>Email:</strong> ${item.data.email}
            </div>
            <div style="display: flex; gap: 8px;">
              <button onclick="alert('Send message to ${item.data.name}')"
                      style="padding: 4px 12px; background: #1890ff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">
                Message
              </button>
              <button onclick="alert('View ${item.data.name} details')"
                      style="padding: 4px 12px; background: #52c41a; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">
                Details
              </button>
            </div>
          </div>
        `;
      },
      style: {
        '.tooltip': {
          background: '#fff',
          borderRadius: '8px',
          boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
          minWidth: '200px',
        },
      },
    },
  ],
});

graph.render();

style - Style Customization

Customize Tooltip styles.


import { Graph } from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', style: { x: 100, y: 100 }, data: { theme: 'dark', name: 'Dark Theme' } },
    { id: 'node2', style: { x: 250, y: 100 }, data: { theme: 'light', name: 'Light Theme' } },
  ],
};

const graph = new Graph({
  container: 'container',
  width: 400,
  height: 200,
  data,
  plugins: [
    {
      key: 'tooltip-dark',
      type: 'tooltip',
      enable: (e, items) => items[0].data.theme === 'dark',
      style: {
        '.tooltip': {
          background: '#1f1f1f',
          color: '#fff',
          border: '1px solid #333',
          borderRadius: '8px',
          fontSize: '14px',
          fontFamily: 'Arial, sans-serif',
          boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
        },
      },
      getContent: (e, items) => {
        return `<div>🌙 ${items[0].data.name}</div>`;
      },
    },
    {
      key: 'tooltip-light',
      type: 'tooltip',
      enable: (e, items) => items[0].data.theme === 'light',
      style: {
        '.tooltip': {
          background: '#ffffff',
          color: '#333',
          border: '1px solid #d9d9d9',
          borderRadius: '8px',
          fontSize: '14px',
          fontFamily: 'Arial, sans-serif',
          boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        },
      },
      getContent: (e, items) => {
        return `<div>☀️ ${items[0].data.name}</div>`;
      },
    },
  ],
});

graph.render();

Practical Examples

API

© Copyright 2026 Ant Group Co., Ltd..备案号：京ICP备15032932号-38
Site search
Documentation and examplesType to start searching

Search documentation, APIs, and examples

↑↓Select↵OpenEscClose