Tooltips也被叫做屏幕提示，它是一种在鼠标悬停在超链接、图标、图片和其它一些元素上的时候显示一些提示信息的有效方法。创建Tooltips有许多种方法，网上也有许多已经制作好的tooltip插件。
在这篇文章中，我们将用CSS3来自己制作tooltip效果。
创建上下左右位置的Tooltip
我们将以简单的超链接来作为Tooltip的示例代码。在超链接中需要一个<span>元素，它用于放置tooltip的信息。
<a class="top_tooltip" href="">TOP POSITION<span>This is a top position tooltip!</span></a>
<a class="left_tooltip" href="">LEFT POSITION<span>This is a left position tooltip!</span></a>
<a class="right_tooltip" href="">RIGHT POSITION<span>This is a right position tooltip!</span></a>
<a class="bottom_tooltip" href="">BOTTOM POSITION<span>This is a bottom position tooltip!</span></a>
现在，HTML标签已经写好了，我们为超链接元素提供一些基本样式。
a.top_tooltip,a.left_tooltip,a.right_tooltip,a.bottom_tooltip {
display: inline;
position: relative;
}
将超链接设置为行内样式，并将它的定位方式设置为相对定位。下面要给<span>元素添加样式，将它设置为圆角矩形。具体制作方法可以参考使用CSS3制作各种形状的图形。记住要使用padding和margin属性来控制<span>元素的大小，并使用position属性来将他们放在正确的位置上。
/* TOP TOOLTIP
-------------------------------------------------*/
a.top_tooltip span {
width: 140px;
height: auto;
color: #fff;
background: #2b2b2b;
position: absolute;
font-size: 13px;
text-align: center;
padding: 10px;
line-height: 20px;
visibility: hidden;
border-radius: 10px;
}
a.top_tooltip span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #2b2b2b;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.top_tooltip span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
/* LEFT TOOLTIP
-------------------------------------------------*/
a.left_tooltip span {
width: 140px;
height: auto;
color: #fff;
background: #2b2b2b;
position: absolute;
font-size: 13px;
text-align: center;
padding: 10px;
line-height: 20px;
visibility: hidden;
border-radius: 10px;
}
a.left_tooltip span:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
margin-top: -8px;
width: 0;
height: 0;
border-left: 8px solid #2b2b2b;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.left_tooltip span {
visibility: visible;
opacity: 0.8;
right: 100%;
top: 50%;
margin-top: -30px;
margin-right: 10px;
z-index: 999;
}
/* RIGHT TOOLTIP
-------------------------------------------------*/
a.right_tooltip span {
width: 140px;
height: auto;
color: #fff;
background: #2b2b2b;
position: absolute;
font-size: 13px;
text-align: center;
padding: 10px;
line-height: 20px;
visibility: hidden;
border-radius: 10px;
}
a.right_tooltip span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0;
height: 0;
border-right: 8px solid #2b2b2b;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.right_tooltip span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -30px;
margin-left: 10px;
z-index: 999;
}
/* BOTTOM TOOLTIP
-------------------------------------------------*/
a.bottom_tooltip span {
width: 140px;
height: auto;
color: #fff;
background: #2b2b2b;
position: absolute;
font-size: 13px;
text-align: center;
padding: 10px;
line-height: 20px;
visibility: hidden;
border-radius: 10px;
}
a.bottom_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #2b2b2b;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.bottom_tooltip span {
visibility: visible;
opacity: 0.8;
top: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
这里使用:hover选择器来显示tooltip。:after伪元素会将内容插入在被选择元素的后面。
改变Tooltips的颜色
现在你已经知道了如何制作一个tooltip效果，你也可以修改这些tooltip的颜色。修改tooltip的颜色并不是一件困难的事情，你只需要设置<span>元素的背景颜色为你想要的颜色。
a.bottom_tooltip_red span {
background: #cf1c1c;
}
接下来你还需要修改:after伪元素边框颜色。
a.bottom_tooltip_red span:after {
border-bottom: 8px solid #cf1c1c;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
为Tooltips制作动画效果
通过CSS3你可以为Tooltip制作一些很酷的动画效果。这里我们要制作淡入淡出和滑动显示两种效果。
要制作淡入淡出效果，你需要使用transition属性来控制正常状态和设备滑过状态的<span>元素。
a.left_tooltip_fading span {
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
opacity: 0;
}
a:hover.left_tooltip_fading span {
opacity: 1;
}
注意：ease-in-out是transition-timing-function，它用于制作平滑的淡入淡出效果。
要制作滑动下手效果，你需要添加一个translated3d值和在鼠标滑过时添加一个平滑的过渡效果。
a:hover.bottom_tooltip_sliding span {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
transition: .3s ease;
}
为Tooltips添加图片
为tooltip添加图片也是十分简单的事情，你只需要在<span>元素中放入图片，然后为它设置一个合适的宽度和高度。如果你还需要在图片上面放一些文字，可以通过CSS来控制它们的位置。
<a class="images_tooltip" href="">IMAGES<span><img height="100" src="img/cat.jpg" width="70"></span></a>
小结
所有的工作到这里就结束了，你已经学会了使用CSS3来制作自己的tooltip效果。这些是最基本的tooltip制作方法，在网上还有一些制作的非常好看的CSS3 tooltip插件如9种html5+css3炫酷tooltip工具提示插件效果和一些jQuery tooltip插件，如jQuery和css3滑动显示tooltips工具提示特效。
