流体提示气泡

黑色胶囊随六个导航入口移动、变宽，通过裁切切换文字；头像使用 LeiBox Logo。

提示交互六框架TypeScript

演示

悬停或聚焦图标移动提示，点击选中；方向键切换焦点，Escape 收起。

npm install react react-dom gsap@3.12.7

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom gsap@3.12.7

FluidTooltip.tsx

正在加载代码…

App.tsx

import { FluidTooltip } from "./FluidTooltip";

export default function App() {
  return <FluidTooltip />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.active` 当前选中的导航项；悬停只改变提示气泡。	`"today" \| "tasks" \| "calendar" \| "focus" \| "settings" \| "profile"`	`"today"`
`options.onSelect` 选中其他导航项时调用。	`(id: string) => void`
`options.profileLabel` 头像对应的提示文字，默认为 LeiBox。	`string`	`"LeiBox"`
`options.logoSrc` 头像 Logo 图片地址，默认和加载失败时使用内嵌 LeiBox 矢量。	`string`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`1080`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`