提示工具

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

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,