最稳妥方案是按钮旁直接加提示文字，纯html+css实现，避免title属性和伪元素；需用aria-describedby关联id以保障无障碍访问，移动端注意点击区域与文案长度平衡。
按钮旁直接加 <span></span> 提示文字最稳妥
多数场景下，不需要 JS 或 tooltip 库——纯 HTML + CSS 就够用。把提示文字放在按钮右侧或下方，语义清晰、可访问性好、加载快。
常见错误是用 title 属性（<button title="加入购物车成功"></button>），它只在悬停时显示，手机端不触发，且无法自定义样式、不支持屏幕阅读器稳定播报。
- 推荐写法：
<button type="button">加入购物车</button><span class="cart-tip">（库存充足，下单后 24h 发货）</span> -
class="cart-tip"用于后续控制颜色、字号、行高，比如设为font-size: 0.85em; color: #666; margin-left: 8px; - 如果提示需动态变化（如“仅剩 3 件”），用 JS 更新
textContent，别替换整个 DOM 节点
aria-describedby 配合 id 是无障碍刚需
视障用户依赖屏幕阅读器，光靠视觉提示不够。必须把提示文字和按钮建立程序化关联。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给提示文字加唯一
id，例如：<span id="cart-hint-123">点击后商品进入暂存区，结算前可修改数量</span> - 按钮上加：
aria-describedby="cart-hint-123" - 注意：不要用
aria-label覆盖按钮本身文本，否则“加入购物车”这个关键操作名会被隐藏 - 多个提示？用空格分隔多个
id，如aria-describedby="cart-hint-123 cart-stock-456"
避免用 CSS ::before/::after 插入说明文字
这类伪元素内容无法被屏幕阅读器读出，也不在 DOM 树中，JS 拿不到、自动化测试难覆盖，属于“对人可见、对机器不可见”的典型反模式。
- 错误示例：
button.cart-btn::after { content: "（支持七天无理由）"; } - 即使加了
aria-hidden="false"也无效——伪元素天生不可访问 - 真要样式统一？用真实元素包裹再统一 class，比如
<div class="cart-button-group"> <button>...</button><span>...</span> </div>
移动端点击区域与提示文案长度要平衡
手指操作需要足够触控面积，但长说明会挤占空间，尤其在小屏上可能折行错位。
- 按钮最小点击宽度建议 ≥ 44px，右侧提示文字建议控制在 1 行内（中文约 ≤ 12 字）
- 超长说明改用「问号图标 + 点击展开」模式，此时提示容器需设
role="region"和aria-expanded - 别让提示文字和按钮之间留白过小，至少保持
margin-left: 6px，避免视觉粘连
aria-describedby 的绑定完整性——开发常记得加提示文字，却忘了加这个属性，或者 id 拼错、重复，导致无障碍支持形同虚设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
