---
title: 插件与工具
order: 5
---
本文将为 **Tutorial 案例** 添加缩略图插件、节点提示框。
使用插件时，有三个步骤：
Step 1: 引入插件；
Step 2: 注册插件；
Step 3: 在实例化图时将插件的实例配置到图上。
## Minimap
缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具，可作为导航辅助用户探索大规模图。
现在，我们为 **Tutorial 案例** 配置一个 Minimap：
**预期效果**
**使用方法**
Minimap 是 G6 的提供的插件之一，但未提前注册，需要从 Extensions 引入并注册后，再配置到图上：
```javascript
cosnt { Graph as GraphBase, extend, Extensions } = G6;
const ExtGraph = extend(GraphBase, {
// ... 其他扩展的注册
// 插件注册
plugins: {
minimap: Extensions.Minimap,
}
});
// 实例化图，注意这里使用的是 extend 后的 Graph
const graph = new Graph({
// ... // 其他配置项
plugins: [
// 若使用默认配置，可以只写一个字符串 'minimap'
{
type: 'minimap',
// ... 其他配置项
}
],
});
```
## tooltip 节点提示框
节点提示框可以用在边的详细信息的展示。当鼠标滑过节点时，显示一个浮层告知节点的详细信息。更多配置参见 [Tooltip 插件](https://g6-next.antv.antgroup.com/apis/interfaces/plugins/tooltip-config)。
**预期效果**
**使用方法**
Tooltip 是 G6 的提供的插件之一，但未提前注册，需要从 Extensions 引入并注册后，再配置到图上：
```javascript
cosnt { Graph as GraphBase, extend, Extensions } = G6;
const ExtGraph = extend(GraphBase, {
// ... 其他扩展的注册
// 插件注册
plugins: {
minimap: Extensions.Minimap,
tooltip: Extensions.Tooltip,
}
});
// 实例化图，注意这里使用的是 extend 后的 Graph
const graph = new Graph({
// ... // 其他配置项
plugins: [
// 若使用默认配置，可以只写一个字符串 'minimap'
'minimap',,
// 若使用默认配置，可以只写一个字符串 'tooltip'
{
type: "tooltip",
key: "my-tooltip", // 唯一标志
itemTypes: ["node"], // 只对节点生效，可以配置为 ['node', 'edge'] 使其同时对边生效
getContent: (e) => { // 自定义内容
const model = graph.getNodeData(e.itemId);
return `ID: ${e.itemId}
Degree: ${model.data.degree}`;
}
// ... 其他配置项
},
],
});
```
## 完整代码
至此，**Tutorial 案例** 完成，完整代码见：Tutorial 案例代码。
**⚠️ 注意:**
若需更换数据，请替换 `'https://raw.githubusercontent.com/antvis/G6/v5-demo-refine/packages/g6/tests/datasets/force-data.json'` 为新的数据文件地址。