Tooltip

用于在悬停或键盘聚焦时，为紧凑的图标操作提供简短补充说明。

预览

图标与键盘焦点提示

悬停或聚焦关注列表图标和文字按钮，比较触发器上方与下方的提示。

将鼠标悬停在按钮上，或把焦点移到按钮。

安装

npx shadcn@latest add @neumorphism-ui/tooltip

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

图标与键盘焦点提示

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/tooltip

Registry JSON

用法

在 Tooltip 内组合 TooltipTrigger 和 TooltipContent，必要时共享 TooltipProvider。触发器本身仍需名称，必读说明应保持可见。

"use client";

import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button />}>Formatting</TooltipTrigger>
        <TooltipContent>Choose how text appears.</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

API 参考

基于 Base UI Tooltip，组合 Provider、Root、Trigger、Portal、Positioner 和 Popup。默认 provider 延迟为 250ms，popup 会自动避开 trigger 周围的碰撞边界。

组件	属性	类型	默认值	说明
`TooltipProvider`	`delay`	`number`	`250`	pointer hover 后打开 tooltip 的延迟时间（ms）。
`Tooltip`	`open / defaultOpen`	`boolean`	`false`	受控的打开状态或非受控初始状态。
`Tooltip`	`onOpenChange`	`(open: boolean) => void`	`—`	打开状态变化时调用。
`TooltipTrigger`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	将 tooltip trigger 行为组合到按钮或链接上。
`TooltipContent`	`side / align`	`"top" \| "right" \| "bottom" \| "left" / "start" \| "center" \| "end"`	`"top" / "center"`	相对于 trigger 设置 popup 的位置。
`TooltipContent`	`sideOffset`	`number`	`8`	设置 trigger 与 popup 之间的间距。

预览

图标与键盘焦点提示

安装

用法

API 参考

无障碍