Tooltip.tsx

Tooltip.tsx

基本信息

  • 类型: React 组件 (shadcn/ui)
  • 路径: ./src/components/ui/tooltip.tsx

功能描述

工具提示组件，用于在悬停时显示额外信息。基于 Radix UI，支持自定义延迟和箭头指示器。

导出内容

  • Tooltip - 工具提示组件（自动包含 Provider）
  • TooltipTrigger - 触发器
  • TooltipContent - 提示内容
  • TooltipProvider - 提供者（通常不需要单独使用）

Props 接口

Tooltip

属性类型必填默认值说明
openboolean否-是否显示（受控）
defaultOpenboolean否-默认是否显示
onOpenChange(open: boolean) => void否-状态变化回调
...propsReact.ComponentProps<typeof TooltipPrimitive.Root>否-Radix Tooltip 属性

TooltipProvider

属性类型必填默认值说明
delayDurationnumber否0延迟显示时间（毫秒）
...propsReact.ComponentProps<typeof TooltipPrimitive.Provider>否-Provider属性

TooltipContent

属性类型必填默认值说明
sideOffsetnumber否0与触发器的距离
classNamestring否-自定义CSS类名
...propsReact.ComponentProps<typeof TooltipPrimitive.Content>否-Content属性

依赖

  • @radix-ui/react-tooltip - Radix UI 工具提示原语
  • @/lib/utils - 工具函数 (cn)

使用示例

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";

// 基础用法
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">悬停我</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>这是工具提示内容</p>
  </TooltipContent>
</Tooltip>

// 带延迟
<TooltipProvider delayDuration={200}>
  <Tooltip>
    <TooltipTrigger>触发器</TooltipTrigger>
    <TooltipContent>
      <p>延迟显示的工具提示</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

// 图标按钮常用场景
<Tooltip>
  <TooltipTrigger asChild>
    <Button size="icon" variant="ghost">
      <Plus className="size-4" />
    </Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>添加新项目</p>
  </TooltipContent>
</Tooltip>
← 返回目录