工具提示

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

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

安装

运行以下命令


pnpm dlx shadcn@latest add tooltip

将 `TooltipProvider` 添加到应用的根目录下。

app/layout.tsx

import { TooltipProvider } from "@/components/ui/tooltip"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  )
}

用法

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

<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

示例

侧边方向

使用 side 属性来更改提示框的位置。

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

使用键盘快捷键

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

禁用按钮

通过用 span 标签包裹禁用的按钮，使其能够显示提示框。

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

RTL (从右至左)

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

"use client"

import { Button } from "@/examples/radix/ui-rtl/button"

API 参考

查看 Radix Tooltip 文档。

Toggle Group Typography

本页内容

安装用法示例方位 (Side)使用键盘快捷键禁用按钮从右到左 (RTL)API 参考

在 Vercel 上部署你的 shadcn/ui 应用

OpenAI、Sonos、Adobe 等公司的信任之选。

Vercel 提供工具和基础设施，以规模化部署应用和功能。