导航与展开@neumorphism-ui/tooltip

Tooltip

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

@neumorphism-ui/tooltip

Registry JSON

预览

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

安装

npx shadcn@latest add @neumorphism-ui/tooltip

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

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

Import

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

Example

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger
      render={<Button size="icon" aria-label="打开设置" />}
    >
      ⚙
    </TooltipTrigger>
    <TooltipContent side="top">
      设置
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

API 参考

组件	属性	类型	默认值	说明
`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 之间的间距。

预览

安装

用法

Import

Example

API 参考

无障碍