106k
New

提示 Tooltip

PreviousNext

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

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

安装

pnpm dlx shadcn@latest add tooltip

用法

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,

API 参考

请参阅 Radix Tooltip 文档。