CSS - 工具提示：初学者指南

你好，未来的网页设计师们！今天，我们将深入探讨CSS工具提示的奇妙世界。作为你友好的计算机老师邻居，我很高兴能引导你完成这次旅行。如果你以前从未编写过一行代码，也不用担心——我们将从最基础的知识开始，逐步学习。那么，拿一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

CSS - Tooltips

工具提示是什么？

在我们开始创建工具提示之前，让我们先了解它们是什么。想象一下，当你在网站上的一个图标上悬停时，突然出现一个小盒子，里面有一些额外信息。那就是工具提示！它们就像提供额外上下文的小助手，而不会让你的主要内容显得杂乱。

创建工具提示

让我们开始创建一个简单的工具提示。我们需要一些HTML和CSS。如果你一开始不理解所有内容，不用担心——我们会一步一步地解释。

<div class="tooltip">将鼠标悬停在我身上！
<span class="tooltiptext">这是一个工具提示</span>
</div>

现在，让我们添加一些CSS来使其工作：

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

让我们分解一下：

我们将主容器设置为 position: relative，以便我们可以相对于它定位工具提示。
工具提示文本默认隐藏，使用 visibility: hidden。
我们使用 position: absolute 来定位工具提示。
:hover 伪类使我们悬停在容器上时工具提示可见。

定位工具提示

现在我们知道如何创建基本的工具提示，让我们探索不同的定位方法。我们可以将工具提示放置在元素的顶部、底部、右侧或左侧。

顶部工具提示

我们已经在第一个示例中看到了顶部工具提示。这里是一个复习：

.tooltip .tooltiptext {
bottom: 125%;
left: 50%;
margin-left: -60px;
}

底部工具提示

要创建底部工具提示，我们只需更改几行代码：

.tooltip .tooltiptext {
top: 125%;
left: 50%;
margin-left: -60px;
}

右侧工具提示

对于右侧工具提示，我们这样调整定位：

.tooltip .tooltiptext {
top: -5px;
left: 105%;
}

左侧工具提示

而对于左侧工具提示：

.tooltip .tooltiptext {
top: -5px;
right: 105%;
}

工具提示箭头

现在，让我们为工具提示添加一些箭头，让它们更有活力！这些小三角形使我们的工具提示看起来更专业，并帮助指向它们描述的确切元素。

顶部箭头工具提示

要为顶部工具提示添加箭头，我们将使用 ::after 伪元素：

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

这会创建一个指向下方的工具提示小三角形。

底部箭头工具提示

对于底部箭头，我们将使用类似的CSS，但更改定位和边框颜色：

.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

右侧箭头工具提示

对于指向右侧的箭头：

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}

左侧箭头工具提示

而对于指向左侧的箭头：

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}

渐显工具提示

想要为你的工具提示添加一些平滑的动画效果吗？让我们让它们渐显！

.tooltip .tooltiptext {
opacity: 0;
transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
opacity: 1;
}

这段CSS将使你在悬停元素上时，工具提示在0.3秒内平滑地渐显。

工具提示的优势

现在我们已经学会了如何创建和设计工具提示，让我们谈谈为什么它们如此出色：

节省空间：工具提示允许你在不杂乱主要内容的情况下提供额外信息。
用户友好：它们在用户需要的地方提供即时解释。
增强用户体验：工具提示可以引导用户通过你的界面，使导航更简单。
灵活性：正如我们所见，工具提示可以以多种方式定位和设计，以适应你的设计。

工具提示方法

下面是一个总结我们讨论过的不同工具提示方法的便捷表格：

方法	描述
顶部工具提示	出现在元素上方
底部工具提示	出现在元素下方
右侧工具提示	出现在元素右侧
左侧工具提示	出现在元素左侧
箭头工具提示	添加指向工具提示的箭头
渐显工具提示	添加平滑的渐显动画

就是这样，伙计们！你现在拥有了为你的网页项目创建时尚、信息丰富的工具提示的知识。记住，熟能生巧，所以不要害怕尝试不同的样式和位置。谁知道呢？你可能只是创造了下一个工具提示设计的大事！

快乐编码，愿你的工具提示总是有所帮助，而从不让人烦恼！

Credits: Image by storyset