气泡卡片

点击（或悬停、聚焦）触发的浮层，里面可以放任意内容：说明、小表单、操作列表。内容写在页面里的一个隐藏元素中，库会复制进浮层。

带行为核心包 2 个事件

示例

代码

<button class="zh-btn" data-zh-popover="#pv-card" data-arrow>查看详情</button>
<div id="pv-card" hidden>
  <p><strong>李明</strong></p>
  <p>内容组 · 最近更新 2 小时前</p>
</div>

属性

属性	用在	取值	说明
`data-zh-popover`	触发按钮	内容元素的选择器，如 #panel	该元素会被隐藏，打开时把它的内容复制进浮层
`data-placement`	同上	top \| bottom \| left \| right，可加 -start / -end，默认 bottom-start	位置，空间不够自动翻转
`data-trigger`	同上	click（默认）\| hover \| focus	触发方式
`data-arrow`	同上		显示指向触发元素的小箭头

事件

事件	触发于	detail	说明
`zh:popover-open`	触发按钮	{ popover }	浮层打开后，popover 是浮层元素
`zh:popover-close`	触发按钮	无	浮层关闭

样式类

zh-pop　zh-pop--popover

点击触发时焦点被限制在浮层里，按 Esc 或点击外部关闭，焦点回到触发按钮
触发按钮会自动带 aria-expanded 和 aria-controls
浮层里的元素是复制品：事件请用事件委托或监听 zh:popover-open，不要给原元素绑定

常见问题

气泡卡片是什么？

点击（或悬停、聚焦）触发的浮层，里面可以放任意内容：说明、小表单、操作列表。内容写在页面里的一个隐藏元素中，库会复制进浮层。

怎么使用气泡卡片？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

气泡卡片有哪些事件？

zh:popover-open（浮层打开后，popover 是浮层元素）；zh:popover-close（浮层关闭）。

气泡卡片支持键盘和读屏吗？

点击触发时焦点被限制在浮层里，按 Esc 或点击外部关闭，焦点回到触发按钮；触发按钮会自动带 aria-expanded 和 aria-controls；浮层里的元素是复制品：事件请用事件委托或监听 zh:popover-open，不要给原元素绑定。

气泡卡片需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。