---
title: "向您的编辑器添加提示工具 UI 组件"
description: "添加一个小信息弹出框，当悬停在元素上时显示。更多信息请参阅文档！"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/primitives/tooltip"
---

# 向您的编辑器添加提示工具 UI 组件

添加一个小信息弹出框，当悬停在元素上时显示。更多信息请参阅文档！

当悬停在元素上时出现的小信息弹出框。

> **Interactive demo:** [tooltip](https://template.tiptap.dev/preview/tiptap-ui-primitive/tooltip)

## 安装

您可以通过 Tiptap CLI（适用于 Vite 或 Next.js）添加该原始组件。

```bash
npx @tiptap/cli@latest add tooltip
```

### 手动集成

对于 Vite 或 Next.js 以外的框架，请从 [开源代码库](https://github.com/ueberdosis/tiptap-ui-components/tree/main/apps/web/src/components/tiptap-ui-primitive/tooltip) 手动添加该原始组件。

### 导入样式

此组件需要您导入我们添加到 `styles/keyframe-animation.scss` 和 `styles/_variables.scss` 的样式。

## 使用方法

```tsx
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/tiptap-ui-primitive/tooltip'
import { Button } from '@/components/tiptap-ui-primitive/button'

export default function MyComponent() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button data-style="ghost">悬停我</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>提示工具内容</p>
      </TooltipContent>
    </Tooltip>
  )
}
```

## 属性

### Tooltip

| 名称                | 类型                      | 默认值       | 描述               |
| ----------------- | ----------------------- | --------- | ---------------- |
| open              | boolean                 | undefined | 受控的打开状态          |
| onOpenChange      | (open: boolean) => void | undefined | 打开状态变化时的回调       |
| defaultOpen       | boolean                 | false     | 默认打开状态           |
| delayDuration     | number                  | 300       | 提示工具出现前的延时（毫秒）   |
| skipDelayDuration | number                  | 300       | 在不同提示工具之间移动时跳过延时 |

### TooltipTrigger

| 名称      | 类型      | 默认值   | 描述          |
| ------- | ------- | ----- | ----------- |
| asChild | boolean | false | 是否将属性与子元素合并 |

### TooltipContent

| 名称    | 类型                                     | 默认值      | 描述        |
| ----- | -------------------------------------- | -------- | --------- |
| side  | 'top' \| 'right' \| 'bottom' \| 'left' | 'top'    | 显示内容的首选侧面 |
| align | 'start' \| 'center' \| 'end'           | 'center' | 边缘对齐      |