Tooltip

显示在浅色斜切块上的简短标签。仅限单行：高度固定，因此能用斜切块而非面板来承载。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/tooltip

示例

三个方向

tooltip-basic.tsx

import { Button } from "@/components/zero/button";import {  Tooltip,  TooltipContent,  TooltipProvider,  TooltipTrigger,} from "@/components/zero/tooltip";export default function TooltipBasic() {  return (    <TooltipProvider>      {(["top", "right", "bottom"] as const).map((side) => (        <Tooltip key={side}>          <TooltipTrigger render={<Button variant="ghost" />}>            Hover ({side})          </TooltipTrigger>          <TooltipContent side={side}>Opens the job board</TooltipContent>        </Tooltip>      ))}    </TooltipProvider>  );}

行为

指针悬停或键盘聚焦时，经过短暂延迟后显示；指针移开即隐藏。在同一个 TooltipProvider 内，从一个触发器移到下一个时，下一个提示会立即显示。

内容控制在几个字以内；更长的内容应放入 Popover。

属性

TooltipContent

属性	类型	默认值	说明
side	"top" \| "bottom" \| "left" \| "right"	"top"	相对触发器的显示方向。

另可传入 Base UI Tooltip.Popup 的全部属性。

TooltipProvider

属性	类型	默认值	说明
delay	number	400	首个提示显示前需要悬停的毫秒数。

另可传入 Base UI Tooltip.Provider 的全部属性。