Softonic

CSS 工具提示生成器

步 1 / 2
下一个

工具提示往往是项目最先想到要引入 JavaScript 库的地方，但由 data-tooltip 属性驱动的一个简单 ::after 伪元素就能覆盖 90% 的实际场景。本生成器会直接输出你所需的 .tooltip 和 .tooltip::after 规则：选择上、下、左或右的位置，调整背景色和文字颜色，再把生成的代码块复制到样式表中即可。

如何将工具提示接入你的 HTML

  1. 1

    选择位置

    上、下、左或右。生成器使用 `calc(100% + 8px)` 配合相应的 transform，让提示气泡紧贴触发元素显示。

  2. 2

    选择颜色

    背景色作用于提示气泡，文字颜色作用于工具提示的文本。为保证可读性，请将对比度保持在 4.5:1 或更高。

  3. 3

    复制 CSS

    将生成的代码块粘贴到样式表中。它提供 `.tooltip`、`.tooltip::after` 和一条 `:hover` 规则。

  4. 4

    为触发元素添加标记

    在任意元素上添加 `class="tooltip" data-tooltip="要显示的文字"`。`::after` 会通过 `content: attr(data-tooltip)` 读取该属性。

纯 CSS 工具提示：你能获得什么，又要放弃什么

纯 CSS 工具提示体积小、速度快，即使禁用 JavaScript 也能正常工作。不过，它位于 DOM 的源码顺序之中，因此会继承一些在设计时需要绕开的限制。

生成的 CSS 做了什么

  • 将触发元素设为 position: relative，使绝对定位的工具提示锚定在它上面。
  • 通过 content: attr(data-tooltip) 拉取文本，因此你无需重复书写内容。
  • 使用 transition: opacity 0.15s 为不透明度添加动画，让提示的出现既迅速又不突兀。
  • 在提示气泡上使用 pointer-events: none，确保它绝不会拦截对触发元素的点击。

定位计算

位置 偏移规则
上 bottom: calc(100% + 8px); left: 50%; translateX(-50%)
下 top: calc(100% + 8px); left: 50%; translateX(-50%)
左 right: calc(100% + 8px); top: 50%; translateY(-50%)
右 left: calc(100% + 8px); top: 50%; translateY(-50%)

无障碍注意事项

  • 屏幕阅读器不会读取 data-tooltip。如果该信息很重要，请将其与 aria-label 或可见文本搭配使用。
  • 键盘用户不仅需要 :hover，还需要 :focus-visible。请将生成的规则扩展为 .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }。
  • 被祖先元素的 overflow: hidden 裁剪掉的工具提示会消失。请将触发元素移出裁剪容器，或在元素密集的界面中改用由 JavaScript 渲染的弹出层。

常见问题

伪元素能让 DOM 保持整洁，避免重复书写文本，并且让你在为工具提示设置样式时不必担心意外匹配到其他元素。代价是 ::after 的内容无法被辅助技术索引，因此请用 aria-label 强化关键文本。

可以。再添加第二个伪元素（例如 .tooltip::before），用一个宽高为零、带彩色边框的盒子来塑形。这是经典的 CSS 三角形技巧；本套件中配套的「CSS 三角形生成器」可以为你生成所需的精确边框声明。

在 ::after 规则中添加 transition-delay: 0.3s，并在鼠标移出时将其重置为零；或者使用 transition: opacity 0.15s 0.3s;，只延迟出现而不延迟消失。

你选择的位置和颜色会被发送到我们的服务器以生成 CSS，但不会被存储或复用。在多步骤页面中，这些值通过页面链接在步骤间传递；在单页面视图中，不会有任何内容被保留。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本