文字提示
悬停或键盘聚焦时显示的小气泡，自动避让屏幕边缘，带箭头。适合解释图标按钮或被禁用的按钮。不用 JS 的简易版见「样式类」里的 zh-tip。
带行为 核心包
示例
代码
<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>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
data-zh-tt | 任意元素 | 提示文字 | 声明提示；元素不可聚焦时库会补 tabindex=0，使键盘也能看到 |
data-zh-tt-placement | 同上 | top | bottom | left | right（可加 -start / -end），默认 top | 出现的位置，空间不够会自动翻转 |
data-zh-tt-delay | 同上 | 毫秒，默认 80 | 悬停多久后出现 |
样式类
zh-pop zh-pop--tooltip
无障碍
- 提示内容通过 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。