Tooltip

在悬停时展示简短说明，支持位置避让与连续切换动效，适合图标按钮和需要补充解释的内容。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于为现有控件提供简短补充提示。主要内容不能只放在 Tooltip；交互表单、菜单或复杂内容优先 Popover / Dialog。

放在触发元素内，不包裹触发器；未提供 children 时读取触发元素文字。
open 未传时由 hover 触发；显式 true / false 时由页面控制。主要内容和必要操作不能只藏在提示中。

导入

import { Tooltip } from '@snowui-design-system/components';

用法

变体

连续动画

位置

展开

换行与视口边缘

API 参考

属性	类型	默认值	示例	描述
`position`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	`position="top"`	首选弹出方向；空间不足时按视口安全区自动翻转或平移，以最终方向定位和进入
`open`	`boolean`	`—`	`open`	可绑定的受控显示状态；未传入时使用父级触发器 hover 与共享 Portal，显式 true / false 时由调用方控制独立 Portal，不参与 hover 延迟与速度采样
`offset`	`number`	`4`	`offset={42}`	沿弹出方向与触发器的目标间距，单位 px；最终仍受视口碰撞约束
`maxWidth`	`number`	`360`	`maxWidth={42}`	气泡最大外框宽度（px）；仍受当前可视区域四边 16px 安全区限制
`variant`	`"dark" \| "light"`	`"light"`	`variant="dark"`	Tooltip 外观变体，默认 light，可显式切换为 dark
`dismissOnMotion`	`boolean`	`true`	`dismissOnMotion`	非受控 hover 模式下，触发元素或其祖先开始动效，或后代开始几何 transition 时立即隐藏 Tooltip；后代装饰性 animation 与 Button 内容整体缩放不关闭，后者不改变触发器锚点
`widthRebound`	`boolean`	`false`	`widthRebound`	连续切换时是否为外框宽度启用越界回弹；默认关闭，开启后宽度会越过目标再回弹
`rapidRetarget`	`boolean`	`true`	`rapidRetarget`	连续动效进行中再次切换目标时，是否选用 90–160ms cubic ease-out 快速基线；关闭后选用普通 120–180ms 协调基线；两者均可根据有效鼠标速度缩短至最低 60ms
`children`	`Snippet`	`—`	`<Tooltip>Content</Tooltip>`	提示内容，无参数；支持文本或公开组件组合。不提供时读取父级触发元素的文本；Tooltip 本身不包裹触发器，而是放在触发元素内