> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/components/tooltip.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.

# Tooltip 文字提示

为页面元素补充简短说明。

## 基础用法


toprightbottomleft

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/tooltip/basic.tsx"
import { Button, Flex, Tooltip } from '@ifhover/leaf-ui';

import { Info } from 'lucide-react';

export function TooltipBasic() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      {(['top', 'right', 'bottom', 'left'] as const).map((placement) => (
        <Tooltip key={placement} placement={placement} content="保存当前项目的修改">
          <Button variant="outline">{placement}</Button>
        </Tooltip>
      ))}
      <Tooltip content="该设置将应用到所有项目">
        <Button variant="ghost" startIcon={<Info />} aria-label="设置说明" />
      </Tooltip>
    </Flex>
  );
}
```

展开代码

## Tooltip API

| 属性                        | 类型                                                                                                                                                                   | 默认值     | 说明                 |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------ |
| `content`                 | `ReactNode`                                                                                                                                                          | 必填      | 提示内容               |
| `children`                | `ReactElement`                                                                                                                                                       | 必填      | 触发元素，需支持 ref 和事件   |
| `placement`               | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `'top'` | 期望展示位置，空间不足时自动调整   |
| `open / defaultOpen`      | `boolean`                                                                                                                                                            | `false` | 受控展开状态 / 初始状态      |
| `onOpenChange`            | `(open: boolean) => void`                                                                                                                                            | —       | 展开状态变化             |
| `disabled`                | `boolean`                                                                                                                                                            | `false` | 禁用提示               |
| `enterDelay / leaveDelay` | `number`                                                                                                                                                             | `100`   | 指针进入 / 离开后的延迟，单位毫秒 |
| `className`               | `string`                                                                                                                                                             | —       | 提示浮层类名             |

## 类型

定义组件属性或组装列表时可导入相关类型。

```ts
import type { TooltipProps } from '@ifhover/leaf-ui';
```

## 使用说明

鼠标悬停或键盘聚焦均可展示，Escape 关闭。Tooltip 会保留触发元素原有事件、ref 和 aria-describedby。禁用按钮不接受焦点，可改用外层可聚焦 span 作为触发元素。提示中适合放说明文字；可交互操作请使用 Dropdown 或弹窗。