提示 Tooltip

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

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>

位置

使用 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 文档。

切换组排版

安装用法位置带键盘快捷键禁用按钮 RTL API 参考

提示 Tooltip

安装

运行以下命令：

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

用法

位置

带键盘快捷键

禁用按钮

RTL

API 参考

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