当前位置主页 > 资料库 > 前端教程 > 使用CSS3自己制作神奇的Tooltip提示效果

使用CSS3自己制作神奇的Tooltip提示效果

2015-04-06

查看演示 下载地址

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制作各种形状的图形。记住要使用paddingmargin属性来控制<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-outtransition-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工具提示特效

查看演示 下载地址

Previous:
上一篇:使用CSS3制作各种形状的图形
Next:
下一篇:CSS3制作各种平滑过渡的动画效果
返回顶部