---
title: "SigmaTooltip"
description: "悬浮或点击节点与边时弹出的提示层，默认展示 label，可用插槽完全接管内容。"
canonical_url: "https://sigma.mhaibaraai.cn/docs/components/tooltip"
---
# SigmaTooltip

> 悬浮或点击节点与边时弹出的提示层，默认展示 label，可用插槽完全接管内容。

## 用法

放进 `SigmaGraph` 即可工作，无需接线。不给插槽时展示节点或边的 `label`，缺失则退回图元的 key。

与 `SigmaPopover` 的分界在于「跟指针走」和「鼠标穿透」：提示层由命中事件驱动，鼠标事件穿透到画布上，里面放不了可点的东西。

### `trigger`

`hover` 跟着指针进出，`click` 点中才打开。两种触发下点击画布空白处都会关闭：

```vue [TooltipTriggerExample.vue]
<script setup lang="ts">
defineProps<{ trigger?: 'hover' | 'click' }>()

const { data } = await useFetch('/api/small.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaTooltip :trigger="trigger" />
  </SigmaGraph>
</template>
```

### `target`

决定响应哪类图元。边没有单一锚点，组件退化到 `graph.source(edge)` 定位——提示层贴在边的**源节点**上，而不是鼠标位置或边的中点。下面这份数据的边不带 `label`，于是默认内容回落到边的 key：

```vue [TooltipTargetExample.vue]
<script setup lang="ts">
defineProps<{ target?: 'node' | 'edge' | 'both' }>()

const { data } = await useFetch('/api/small.json')
</script>

<template>
  <SigmaGraph :data="data" :settings="{ enableEdgeEvents: true }">
    <SigmaTooltip :target="target" />
  </SigmaGraph>
</template>
```

> [!WARNING]
> 
> target
> 
>  含 
> 
> 'edge'
> 
>  或 
> 
> 'both'
> 
>  时，必须先在 
> 
> settings
> 
>  里开 
> 
> enableEdgeEvents: true
> 
> 。这是 sigma 的默认行为——边的命中检测有额外开销，默认关闭——不是本库的限制。

### `offset`

相对锚点的像素偏移，默认 `[0, -12]`。`.sigma-tooltip` 已经用 CSS `translate: -50% -100%` 做好了水平居中与底边贴合，`offset` 在这之上再推像素，用途是让开节点半径：

```vue [TooltipOffsetExample.vue]
<script setup lang="ts">
const props = withDefaults(defineProps<{ offsetY?: number | string }>(), { offsetY: -12 })

const offset = computed<[number, number]>(() => [0, Number(props.offsetY)])

const { data } = await useFetch('/api/small.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaTooltip :offset="offset" />
  </SigmaGraph>
</template>
```

## 示例

### 默认插槽

插槽以 `{ id, type, attributes }` 暴露命中项，`attributes` 是该节点或边的完整属性对象，图元已从图上移除时为 `{}`：

```vue [TooltipSlotExample.vue]
<script setup lang="ts">
import type { StylesDeclaration } from 'sigma/types'

const { data: dataset } = await useFetch('/api/wikipedia.json')

const styles = computed<StylesDeclaration>(() => ({
  nodes: {
    label: { attribute: 'label' },
    color: { attribute: 'cluster', dict: dataset.value?.clusterColors ?? {}, defaultValue: '#999' },
    size: {
      attribute: 'score',
      min: 6,
      max: 24,
      minValue: dataset.value?.scoreExtent[0],
      maxValue: dataset.value?.scoreExtent[1]
    }
  },
  edges: { color: '#ddd' }
}))
</script>

<template>
  <SigmaGraph :data="dataset!.data" :styles="styles" :settings="{ enableEdgeEvents: true }">
    <SigmaTooltip target="both">
      <template #default="{ id, type, attributes }">
        <strong>{{ attributes.label ?? id }}</strong>
        <span class="ml-1.5 text-muted">
          {{ type === 'node' ? dataset!.clusterLabels[attributes.cluster] : '关系' }}
        </span>
      </template>
    </SigmaTooltip>
  </SigmaGraph>
</template>
```

> [!NOTE]
> 
> 键名是 
> 
> id
> 
>  而不是 
> 
> key
> 
> ——
> 
> key
> 
>  是 Vue 的保留属性，作用域里放不进去。
> 
> SigmaContextMenu
> 
>  同理。

### `hide()`

与 `SigmaPopover` / `SigmaContextMenu` 不同，本组件的插槽作用域里**没有** `close`：提示层跟着指针走，没有「用户主动关掉」这回事。确实需要程序化关闭时经模板 ref：

```vue [TooltipHideExample.vue]
<script setup lang="ts">
const tooltip = useTemplateRef('tooltip')

const { data } = await useFetch('/api/data.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaTooltip ref="tooltip" trigger="click" />

    <SigmaControls>
      <UButton label="hide()" @click="tooltip?.hide()" />
    </SigmaControls>
  </SigmaGraph>
</template>
```

## API

### Props

```ts
/**
 * Props for the SigmaTooltip component
 */
interface SigmaTooltipProps {
  /**
   * 触发方式
   * @default 'hover'
   */
  trigger?: "click" | "hover" | undefined;
  /**
   * 响应的图元类型。边事件需要 `settings.enableEdgeEvents` 为 true
   * @default 'node'
   */
  target?: "node" | "edge" | "both" | undefined;
  /**
   * 相对锚点的像素偏移 `[x, y]`
   * @default [0, -12]
   */
  offset?: [number, number] | undefined;
}
```

### Slots

```ts
/**
 * Slots for the SigmaTooltip component
 */
interface SigmaTooltipSlots {
  default(): any;
}
```

### Expose

通过 [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref) 访问类型化的组件实例。

| Name | Type |
| --- | --- |
| `hide()` | `() => void` <br> 关闭当前提示层。点击画布空白处始终会关闭，这个方法用于其余时机。 |


## Sitemap

See the full [sitemap](https://sigma.mhaibaraai.cn/sitemap.md) for all pages.