气泡浮层适合简短说明、链接预览和轻量操作。桌面悬停或键盘聚焦触发项时展开;移动端长按触发项显示,点外部关闭。
图纸复用组件的真实面板与箭头样式。辅助说明使用浅色文字,链接支持悬停与选中状态;长文字以 20px 行高换行,内部项圆角为面板实际圆角减 4px;箭头避开圆角,左右面板平直边不足时,箭头与面板分开约 2px,保留完整边框和独立阴影,外圆角保持统一。自定义内容需要自行提供排版和滚动容器。
桌面可悬停或用 Tab 聚焦按钮;移动端按住 500ms 显示浮层,松手后保留,点外部关闭。滑动或提前松手会取消长按,普通短按保留原有操作。
交互演示
基础说明与快捷键
桌面离开触发项后关闭;移动端长按后松手保留,点外部关闭。
四向定位
优先按 top、bottom、left、right 展开;靠近屏幕边缘时自动翻转或平移,箭头继续指向触发项。
长文字换行
示例宽 240px;沿用默认文字行的内边距与 20px 行高。
可交互内容与点击关闭
可从触发项移入气泡操作,点击内容后关闭;仅更新本页提示。
可滚动的交互内容
列表最大高 180px;点击选项后保持展开,可继续滚动操作,点外部关闭。仅更新本页状态。
延迟展开
openDelay 只控制鼠标悬停;键盘聚焦立即展开,触屏统一长按 500ms。
禁用状态
禁用气泡
开启
disabled 只禁用气泡,触发按钮保留原有功能。
内容就绪后显示
每次展开模拟等待 600ms;就绪前不显示浮层。
动态尺寸
clickable 允许在浮层内操作,内容变化带有尺寸过渡。
容器裁切、自动翻转与滚动内容
这是一个 overflow: hidden 的容器。气泡通过 Teleport 挂载到 #App,越过容器边界展示。
优先向下展开,空间不足时按备用方向翻转。预览最大高 180px;KPopover 统一滚动内容和面板的 4px 留白,滚动时顶部留白移走,底部留白到末尾才出现。
行内提示
说明可附着在句子中的 上,悬停或聚焦即可查看补充信息。