CSS提示

创建CSS提示。

演示：提示示例

工具提示是经常被用来当用户将在一个元素的鼠标指针移动到指定有关一些额外的信息：

基本的工具提示

创建当用户在一个元素上移动鼠标时出现的提示：

例子解释：

HTML）使用容器元素（如<div>并添加"tooltip"类吧。 当用户鼠标移到该<div> ，它会显示提示文字。

提示文本放置一个内联元素中（如<span>与class="tooltiptext"

CSS）的tooltip类使用position:relative ，这是需要的提示文本（位置position:absolute 。） 注：请参见下面的例子就如何将工具提示的位置。

该tooltiptext类持有实际的工具提示文本。 它默认是隐藏的，并将于悬停可见（见下文）。 我们还增加了一些基本的样式吧：120像素宽，黑色的底色，白色文本颜色，居中的文本，并为5px顶部和底部填充。

CSS3的border-radius属性用于圆角添加到工具提示文本。

该:hover选择器用于当用户移动鼠标在显示工具提示文本<div>与class="tooltip" 。

定位工具提示

在这个例子中，工具提示被放置在正确的(left:105%)的的"hoverable"文本(<div>) 还要注意的是top:-5px用于将其放置在其容器元件的中间。 我们用5号，因为提示文本有5像素的顶部和底部填充。 如果增加其填充，也增加了价值top属性，以确保它保持在中间（如果这是你想要的东西）。 如果你想放置在左边的提示同样适用。

如果你想在提示出现在顶部或底部，请参见下面的例子。 注意，我们使用的margin-left财产零下60像素的值。 这是到中心上方的工具提示/低于hoverable文本。 它被设置为工具提示的宽度（120/2 = 60）的一半。

提示箭头

要创建应该出现在提示的一个具体方面，提示后加“空”的内容，与伪元素类的箭头::after与一起content属性。 箭头本身使用的边界创建。 这将使工具提示看起来像一个讲话泡沫。

这个例子演示了如何将箭头添加到工具提示底部：

例子解释：

箭头工具提示内侧的位置： top: 100%将会把箭头提示的底部。 left: 50%将中心的箭头。

注意： border-width属性指定的箭头的大小。 如果你改变这一点，也改变了margin-left值相同。 这将保持居中的箭头。

所述border-color用于将内容转换成一个箭头。 我们设置上边框为黑色，其余为透明。 如果各方都是黑人，你最终会得到一个黑色的方盒子。

这个例子演示了如何将箭头添加到工具提示的顶部。 请注意，我们设置在底边框的颜色这个时候：

这个例子演示了如何将箭头添加到工具提示左侧：

这个例子演示了如何将箭头添加到工具提示的权利：

淡入工具提示（动画）

如果你想在提示文本褪色，当它即将是可见的，你可以使用CSS3 transition的共同财产opacity性，以及为100％可见完全看不见去，在一些特定秒（1秒在我们的例子）：

注意：您将了解更多有关过渡和动画在我们的教程后面。