💬
纯 CSS 提示框
生成不依赖 JS 的 CSS 悬停提示气泡，可选方向、颜色与圆角，复制即用。
本地处理 · 不上传
加载工具中…
相关：tooltip · 提示 · 气泡 · hover · css
纯 CSS 提示框生成不依赖 JavaScript 的悬停提示，用伪元素实现气泡与尖角，可选方向、颜色与动画，输出即用代码。
使用步骤
- 设置提示方向与文字
- 调整颜色与圆角
- 预览悬停效果
- 复制 HTML 与 CSS
使用场景
- 为图标按钮添加文字说明
- 解释表单字段的填写要求
- 展示被截断内容的完整文字
- 轻量提示无需引入组件库
小贴士
- 纯 CSS 提示只在悬停时出现，触屏设备上没有悬停状态，移动端需要额外考虑点击触发或直接显示文字。
- 提示内容放在 data 属性里由伪元素的 content 读取，这样 HTML 保持干净，但屏幕阅读器不一定能读到——重要信息应同时提供 aria-label。
- 提示框可能被父容器的 overflow:hidden 裁掉，这是最常见的「提示不显示」原因。
常见问题
移动端能用吗？
触屏没有悬停状态，纯 CSS 提示基本无法触发。移动端应改为点击展开，或干脆把说明文字直接显示出来，不要依赖悬停。
提示框被截断了？
多半是某个祖先元素设了 overflow:hidden。可以把提示改用 position:fixed，或调整该容器的 overflow 设置。
无障碍怎么处理？
伪元素的 content 内容不被所有屏幕阅读器可靠读取。应该给触发元素加 aria-label 或 aria-describedby，确保信息对辅助技术可用。
纯 CSS 提示框是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用纯 CSS 提示框，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。