工具提示

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

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

安装

🌐 Installation

运行以下命令：


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>
  )
}

用法

🌐 Usage

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

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

示例

🌐 Examples

侧面

🌐 Side

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

🌐 Use the side prop to change the position of the tooltip.

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

使用快捷键

🌐 With Keyboard Shortcut

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

禁用按钮

🌐 Disabled Button

通过用一个 span 封装禁用按钮来显示工具提示。

🌐 Show a tooltip on a disabled button by wrapping it with a span.

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

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

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

API参考

🌐 API Reference

请参阅 Base UI Tooltip 文档。

🌐 See the Base UI Tooltip documentation.

切换组排版

On This Page

安装用法示例侧面使用快捷键禁用按钮从右到左 API参考