KPopover

气泡浮层

气泡浮层适合简短说明、链接预览和轻量操作。桌面悬停或键盘聚焦触发项时展开;移动端长按触发项显示,点外部关闭。

气泡规范图纸CSS 像素 · 实物面板 · 280px 为演示宽度
这是一条辅助说明当前操作 Enter
其他操作
外圆角 R 20px · 主题圆角箭头:16px 方块旋转 45°,1px 外描边外描边 1px · 净留白 4px字号 14px · 行高 20px · 单行高 32px文字行:上下 6px · 左右 20px分隔线 1px · 上下 4px · 左右 20px文字距面板外缘 24px = 4px 留白 + 20px 行内边距浮层外围通常留 8px;箭头方向一侧留 10px,容纳箭头;仅在面板接缝处裁切,保留向外投影。宽度随内容;面板最小 80px、最大为视口宽度减 28px。

图纸复用组件的真实面板与箭头样式。辅助说明使用浅色文字,链接支持悬停与选中状态;长文字以 20px 行高换行,内部项圆角为面板实际圆角减 4px;箭头避开圆角,左右面板平直边不足时,箭头与面板分开约 2px,保留完整边框和独立阴影,外圆角保持统一。自定义内容需要自行提供排版和滚动容器。

桌面可悬停或用 Tab 聚焦按钮;移动端按住 500ms 显示浮层,松手后保留,点外部关闭。滑动或提前松手会取消长按,普通短按保留原有操作。

交互演示

基础说明与快捷键

桌面离开触发项后关闭;移动端长按后松手保留,点外部关闭。

四向定位

优先按 top、bottom、left、right 展开;靠近屏幕边缘时自动翻转或平移,箭头继续指向触发项。

长文字换行

示例宽 240px;沿用默认文字行的内边距与 20px 行高。

可交互内容与点击关闭

可从触发项移入气泡操作,点击内容后关闭;仅更新本页提示。

可滚动的交互内容

列表最大高 180px;点击选项后保持展开,可继续滚动操作,点外部关闭。仅更新本页状态。

延迟展开

openDelay 只控制鼠标悬停;键盘聚焦立即展开,触屏统一长按 500ms。

禁用状态

禁用气泡

开启

disabled 只禁用气泡,触发按钮保留原有功能。

内容就绪后显示

每次展开模拟等待 600ms;就绪前不显示浮层。

动态尺寸

clickable 允许在浮层内操作,内容变化带有尺寸过渡。

容器裁切、自动翻转与滚动内容

这是一个 overflow: hidden 的容器。气泡通过 Teleport 挂载到 #App,越过容器边界展示。

优先向下展开,空间不足时按备用方向翻转。预览最大高 180px;KPopover 统一滚动内容和面板的 4px 留白,滚动时顶部留白移走,底部留白到末尾才出现。

行内提示

说明可附着在句子中的 上,悬停或聚焦即可查看补充信息。