ZartUI — 气泡卡片 Popover

作为容器承载文本、图片、表单、数据等复杂内容；支持点击或 Hover 触发；可承载可操作元素（链接、按钮），区别于 Tooltip 的纯提示展示

基础气泡卡片

仅标题
气泡卡片标题
仅内容（多行）
这里是气泡卡片的内容区域，没有标题，只展示正文内容。内容可以有多行，字号 14px，颜色 #223355，行高 1.6，宽度固定为 242px，高度随内容自适应增长，不限制最大高度。
标题 + 内容
气泡卡片标题
这里是气泡卡片的补充说明内容，可以是多行文字描述。
含链接
气泡卡片标题
这里是气泡卡片的补充说明内容。
查看详情 →
含操作按钮
气泡卡片标题
确认要执行此操作吗？该操作不可撤销。
危险提示
确认删除
此操作不可撤销，删除后数据将无法恢复。

弹出方向

上方（top-start / top / top-end）
左上弹出
箭头位于卡片左侧。
top-start
上方弹出
箭头位于卡片中央。
top
右上弹出
箭头位于卡片右侧。
top-end
下方（bottom-start / bottom / bottom-end）
左下弹出
箭头位于卡片左侧。
bottom-start
下方弹出
箭头位于卡片中央。
bottom
右下弹出
箭头位于卡片右侧。
bottom-end
左侧（left-start / left / left-end）
左上对齐弹出
箭头位于卡片上侧。
left-start
左侧弹出
箭头位于卡片中央。
left
左下对齐弹出
箭头位于卡片下侧。
left-end
右侧（right-start / right / right-end）
右上对齐弹出
箭头位于卡片上侧。
right-start
右侧弹出
箭头位于卡片中央。
right
右下对齐弹出
箭头位于卡片下侧。
right-end

交互触发

Hover 触发
点击触发
返回组件首页