Tooltip
tooltip提示浮层 · Base UI Positioner + 箭头 + hover 触发
用法
基础用法
悬停 / 聚焦触发器即显示简短提示；TooltipProvider 统一管理打开延迟。
tsx
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline">悬停查看</Button>} />
<TooltipContent>瑚琏提示</TooltipContent>
</Tooltip>
</TooltipProvider>提示方位
side 控制提示出现的方向，箭头自动指向触发器。
tsx
<>
<Tooltip>
<TooltipTrigger render={<Button variant="outline">向右</Button>} />
<TooltipContent side="right">向右</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger render={<Button variant="outline">向下</Button>} />
<TooltipContent side="bottom">向下</TooltipContent>
</Tooltip>
</>长文案
较长提示自动按最大宽度换行。
tsx
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline">悬停查看</Button>} />
<TooltipContent>较长的提示文案验证最大宽度与换行表现</TooltipContent>
</Tooltip>
</TooltipProvider>何时用
hover/focus 触发的纯文本短提示（图标含义、截断文字全文、操作说明）。承载富内容（头像 + 简介卡片）用 HoverCard；click 触发 + 带操作按钮用 Popover。delay / closeDelay 在 TooltipProvider 上，不在 Tooltip 上。
导入
ts
import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from "@hulianui/ui"Props
TooltipContent：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| side | "top"｜"right"｜"bottom"｜"left" | "top" | 浮层方位 |
| align | "start"｜"center"｜"end" | "center" | 对齐 |
| sideOffset | number | — | 与触发器的间距 |
| className | string | — | 额外类名 |
TooltipProvider 接 delay / closeDelay（ms）控制开合延迟。
Slots
TooltipContent：
| 插槽 | 类型 | 说明 |
|---|---|---|
| children* | ReactNode | 提示文案 |
TooltipTrigger 用 render prop 接管触发元素。
禁忌 / 坑
delay/closeDelay写在TooltipProvider而非Tooltip；截图/稳态验收时把两者设 0 让 hover 即开。- 在 flex 行内（带
text-overflow:ellipsis+min-w-0）用 Tooltip 包裹文本时，触发器 wrapper 若是inline-block会按内容固有宽撑开、绕过父级宽度约束破坏截断（同类问题见 [[heroui-tooltip-trigger-inline-block-breaks-flex-truncation]]）；本组件用render注入元素时确保触发元素本身保持block; min-w-0。
相关
Playground
<Tooltip>
<TooltipTrigger render={<Button>悬停查看</Button>} />
<TooltipContent side="top" align="center">瑚琏提示</TooltipContent>
</Tooltip>