三个超简单的步骤，教你DIY工具提示
如何构建自定义 CSS 工具提示？
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
自简陋的绘图板诞生以来，图形用户界面 (GUI) 已经取得了巨大的进步。然而，往往是最简单的工具才能让你的网站从平庸跃升至卓越。其中一个具有这种独特优势的 GUI 元素就是不起眼的工具提示。对于不熟悉的人来说，工具提示就是当你将鼠标悬停在某个项目上而没有点击它时弹出的那个小方框。工具提示通常用于提供有关项目的信息或说明其用途。
乍一看，工具提示似乎显得不够精致，不值得在网站建设中投入时间。然而，它却像完成乐高模型所需的最后一块积木：少了它，整个模型就无法完整。工具提示可以让访客在浏览网站时无需离开当前页面，从而有效地省去了“帮助”部分。这不仅提升了用户体验，还能确保你通过网站传达的信息流畅无阻，避免任何不必要的干扰。此外，工具提示也是一个不错的补充，它不会喧宾夺主，让访客可以选择是否使用。这些看似微小的用户体验改进，最终会带来显著的累积效应。下面我将介绍如何仅使用 CSS 构建工具提示。我选择使用 CSS 而非 JavaScript 来演示，以减少不必要的 JavaScript 开销。
如何构建自定义 CSS 工具提示？
你无需费力地在 StackExchange 上搜索就能找到一个不错的免费工具提示。
如果我说你可以自己做一个呢？
这里有一个你可以使用的自制 CSS 工具提示。或者，你也可以根据自己的喜好使用 SASS 或 Less。
1. 定义带有工具提示相关属性的 HTML 元素
您可以定义任何 HTML 元素，例如按钮、锚点、span 等，然后添加属性以启用这些元素的工具提示。在下面的示例中，我已将tooltip-title属性添加到元素中。
2. 为工具提示添加样式。
:after我们使用 CSS 在所选元素的伪元素中设置工具提示的样式。
| [tooltip-title] { | |
| /* base style for the element */ | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| [tooltip-title]::after { | |
| /* Takes the content from tooltip-title attribute */ | |
| content: attr(tooltip-title); | |
| /* should be hidden initially */ | |
| opacity: 0; | |
| /* basic styling tooltip */ | |
| background: #222; | |
| border-radius: 4px; | |
| color: #fff; | |
| margin-bottom: 12px; | |
| padding: 0.5em 1em; | |
| white-space: nowrap; | |
| z-index: 10; | |
| /* Positioning tooltip */ | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| /* Basic effects on tooltip */ | |
| transition: all 0.2s ease-out 0.2s; | |
| transform: translate(-50%, 10px); | |
| transform-origin: top; | |
| } | |
| [tooltip-title]:hover::after { | |
| /* Making it visible on hover */ | |
| opacity: 1; | |
| } | |
| [tooltip-title]:hover::after { | |
| /* Effects on hover */ | |
| transform: translate(-50%, 0); | |
| } | |
3. 高级工具提示功能（可选）。
3.1 调整工具提示的位置
除了外观之外，你还可以定义工具提示的位置。例如，顶部、底部、左侧、右侧、右上角、左上角、右下角、左下角等等。
下面展示的是一个根据tooltip-position属性中指定的位置显示工具提示的示例。（tooltip-position='bottom'此处仅作示例，您可以对其他可能的位置进行类似操作。）
3.2 为工具提示着色
您可以根据要显示的消息为工具提示定义颜色（例如：成功/绿色，警告/黄色，错误/红色等）。
在下面的示例中，我tooltip-color为元素添加了一个属性来定义所需的颜色。（tooltip-color='warning'这里以白色为例，您可以用类似的方法添加其他颜色。）
3.3 调整工具提示的大小
您可以根据要显示的消息长度来定义工具提示的大小（例如：小、中、大、特大、自动宽度等）。
在下面的示例中，我tooltip-length向元素添加了属性来定义工具提示的宽度。（tooltip-length='lg'此处显示的是 1000 毫米，您可以类似地设置其他长度。）
您可以点击此处查看上述示例的演示：工具提示预览
此外，我还创建了一个名为SpikeTip 的开源工具提示库，您可以在您的网站/分支中使用它，然后按照您想要的方式进行修改。
对于那些想要直接将工具提示集成到项目中的用户，我已经创建了一个 NPM 包，您可以在这里找到安装指南：SpikeTip — NPM 包。
工具提示绝对是您网站的一个重要补充，我希望上面的 DIY 小教程能帮助您创建自己喜欢的风格化工具提示。
原文发表于 https://vishnubaliga.com。
文章来源：https://dev.to/vishnubaliga/3-insanely-simple-steps-to-diy-tooltips-5d50