CSS 提示框（Tooltip）生成器

CSS 提示框（Tooltip）生成器: 用途

Tooltip 是鼠标悬停在按钮或图标上时出现的简短提示。这个生成器只用 CSS 制作提示，支持四个方向，可选小箭头，可设置颜色、圆角和延迟，避免鼠标只是路过时闪烁。

代码支持无障碍：提示通过 aria-describedby 与按钮关联，带有 role=tooltip，在元素通过键盘或触摸获得焦点时同样显示，并尊重希望减少动态效果的设置。预览中有三个按钮可供测试。

使用方法

1. 选择位置、颜色和圆角。
2. 调整延迟和小箭头。
3. 复制 HTML 和 CSS。

使用场景

• 为无文字的图标做说明。
• 表单中的提示。
• 面板中的操作按钮。

常见问题

提示框在手机上能用吗？

手机上没有鼠标悬停；提示会在元素获得焦点时出现，也就是点按按钮或链接时。因此不要把必须让用户看到的信息只放在提示框里：它也应出现在页面正文中。

如何做到无障碍？

提示文字放在带 role=tooltip 的元素中，并通过 aria-describedby 与按钮关联，屏幕阅读器会连同按钮名称一起朗读。它也会在键盘聚焦（focus-visible）时显示，且不只依赖颜色。

为什么出现前有延迟？

短暂的延迟可以避免鼠标只是路过时提示闪烁。消失时则是立即的。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具