QiuYe UI
浮层与引导

MorphTooltip

形变提示气泡：默认高级黑、平滑圆角；同一个 Provider 内共享一个气泡，只有第一次悬停需要等待，之后在范围内的元素间移动时气泡滑到新目标并连续变形宽高，内容沿移动方向交叉淡入，退场途中再进入会从当前状态反向回来。支持方向与对齐、碰撞翻转与平移、最大宽度换行、快捷键键帽、箭头、富内容、指针可移入气泡、受控、内容变化时原地形变、键盘聚焦、Esc 关闭与触屏长按。

tooltip提示共享元素单例形变平滑圆角快捷键弹簧动画

快速预览

查看 MorphTooltip 组件的基本效果

悬停或长按图标，气泡在图标间滑动

基本用法

使用 MorphTooltip 组件的基础示例

导入组件

1import {
2  MorphTooltip,
3  MorphTooltipProvider,
4} from "@/components/qiuye-ui/morph-tooltip";

使用组件

1<MorphTooltipProvider>
2  <MorphTooltip content="加粗" shortcut={["⌘", "B"]}>
3    <Button size="icon" variant="ghost" aria-label="加粗">
4      <BoldIcon />
5    </Button>
6  </MorphTooltip>
7  <MorphTooltip content="斜体" shortcut={["⌘", "I"]}>
8    <Button size="icon" variant="ghost" aria-label="斜体">
9      <ItalicIcon />
10    </Button>
11  </MorphTooltip>
12</MorphTooltipProvider>

组件演示

查看组件的各种使用方式和效果

编辑器工具栏
整条工具栏是一个范围：第一次悬停等待 400ms，之后在按钮之间移动，气泡不消失、直接滑过去并变形尺寸；快速扫过时文字直接替换，只有气泡在滑。离开后 500ms 内回来无需等待；Tab 键在按钮间移动同样会滑动，触屏上长按按钮显示。
首次悬停需等待 400ms

提示气泡在整条工具栏里只有一个，从一个按钮移到另一个按钮时，它滑过去并连续变形，而不是消失再出现。

贡献热力图
53 × 7 个格子共享一个带箭头的气泡。指针扫过时气泡在格子之间连续滑动、宽度随文字变化，扫动途中文字直接替换保持可读，停下时内容沿移动方向交叉淡入。气泡会盖住上方的格子，所以这里关闭了 hoverable，让它对指针透明。
11月12月1月2月3月4月5月6月7月8月9月10月
一三五
过去一年共 971 次贡献少多
方向、对齐与碰撞
左侧是四个方向 × 三种对齐，同一范围内跨方向移动时箭头在滑动途中隐藏、到位后在新的一侧出现；右侧的小舞台把自身设为 Provider 的碰撞边界，按钮靠近边缘时气泡翻到对侧或沿边平移，滚动时贴着按钮走，滚出舞台即隐藏。
side × align
在这里上下左右滚动
内容与样式
所有按钮在同一个范围里：在不同配色之间移动时，背景与文字颜色随形变一起过渡；长文本换行后收窄到最长一行，富内容按自身尺寸形变。指针可以移进任何气泡阅读；可交互的气泡里的链接可以点击，键盘聚焦按钮后按 Tab 也能进入。
内容
配色
内容变化
这些按钮设置了 closeOnClick={false}：点击后气泡不消失，内容换成新的一条时原地交叉淡入、变形尺寸，并播报给读屏软件。「下载」是受控的：下载期间一直显示（悬停别的按钮后，回来仍会显示），进度在同一条内容里原地更新。
范围
气泡只在同一个 Provider 里共享。相邻的两个 Provider 互不影响；没有 Provider 的提示各自成一个范围，每次都重新等待，也不会在元素之间滑动。

两个相邻的 Provider：组内滑动，跨组时重新出现

没有 Provider：每个提示独立出现与消失

参数调试
实时调整范围的计时、方向与外观。把 closeDelay 调到 0 再快速扫过按钮，可以看到气泡在缝隙处先消失再出现；关闭 morph 后气泡仍是单例，但直接跳到新位置。
方向 side
对齐 align
配色 variant
首次等待 delay400ms
免等待窗口 skipDelayDuration500ms
隐藏延迟 closeDelay100ms
距离 sideOffset8px
最大宽度 maxWidth280px