# 气泡卡片

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

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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>
```

## 样式类

`zh-pop`、`zh-pop--popover`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `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` | 触发按钮 | 无 | 浮层关闭 |

## 无障碍

- 点击触发时焦点被限制在浮层里，按 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。