# 文字提示

悬停或键盘聚焦时显示的小气泡，自动避让屏幕边缘，带箭头。适合解释图标按钮或被禁用的按钮。不用 JS 的简易版见「样式类」里的 zh-tip。

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

## 用法

```html
<div class="zh-row">
  <button class="zh-btn" data-zh-tt="保存当前草稿">保存</button>
  <span data-zh-tt="没有编辑权限，请联系管理员开通" data-zh-tt-placement="bottom"><button class="zh-btn primary" disabled aria-disabled="true">提交审核</button></span>
</div>
```

## 样式类

`zh-pop`、`zh-pop--tooltip`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-zh-tt` | 任意元素 | 提示文字 | 声明提示；元素不可聚焦时库会补 tabindex=0，使键盘也能看到 |
| `data-zh-tt-placement` | 同上 | top \| bottom \| left \| right（可加 -start / -end），默认 top | 出现的位置，空间不够会自动翻转 |
| `data-zh-tt-delay` | 同上 | 毫秒，默认 80 | 悬停多久后出现 |

## 无障碍

- 提示内容通过 aria-describedby 关联到元素，读屏会读出
- 被禁用的按钮不能聚焦也收不到悬停：外面包一层 <span data-zh-tt="…">，把提示放在 span 上
- 提示只放补充说明，关键信息不要只写在提示里

## 常见问题

### 文字提示是什么？

悬停或键盘聚焦时显示的小气泡，自动避让屏幕边缘，带箭头。适合解释图标按钮或被禁用的按钮。不用 JS 的简易版见「样式类」里的 zh-tip。

### 怎么使用文字提示？

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

### 文字提示支持键盘和读屏吗？

提示内容通过 aria-describedby 关联到元素，读屏会读出；被禁用的按钮不能聚焦也收不到悬停：外面包一层 <span data-zh-tt="…">，把提示放在 span 上；提示只放补充说明，关键信息不要只写在提示里。

### 文字提示需要依赖框架吗？

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