120k
New

工具提示

PreviousNext

当元素获得键盘焦点或鼠标悬停在元素上时，显示与该元素相关信息的弹出窗口。

Base UIReact AriaRadix UI
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip"

安装

pnpm dlx shadcn@latest add tooltip

用法

import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip"
<TooltipTrigger>
  <Button>悬停</Button>
  <Tooltip>
    <p>添加到库</p>
  </Tooltip>
</TooltipTrigger>

组合

使用以下组合构建一个 Tooltip：

TooltipTrigger
├── Button
└── Tooltip

位置

使用 placement 属性更改工具提示的位置。

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

使用键盘快捷键

import { SaveIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

禁用按钮

通过使用 span 包裹禁用按钮来显示工具提示。

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

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import {

API 参考

请参阅 React Aria Tooltip 文档。