124k
New

提示 Tooltip

PreviousNext

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

Base UIReact AriaRadix UI
Radix UI
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>悬停</TooltipTrigger>
  <TooltipContent>
    <p>添加到库</p>
  </TooltipContent>
</Tooltip>

组合

使用以下组合来构建 Tooltip：

Tooltip
├── TooltipTrigger
└── TooltipContent

侧边

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

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

使用键盘快捷键

import { SaveIcon } from "lucide-react"

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

禁用按钮

在禁用按钮上显示提示工具，通过用 span 包裹该按钮实现。

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

RTL

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

"use client"

import {

API 参考

请参阅 Radix 工具提示 文档。