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

Tooltips也被叫做屏幕提示,它是一种在鼠标悬停在超链接、图标、图片和其它一些元素上的时候显示一些提示信息的有效方法。创建Tooltips有许多种方法,网上也有许多已经制作好的tooltip插件。

tooltips起源于一些老的微软软件项目,如微软的word。这些软件中有一个工具栏,当鼠标滑过或悬停在工具栏上面的时候,就会出现一些该工具的相关提示信息。

使用CSS3自己制作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-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添加图片也是十分简单的事情,你只需要在元素中放入图片,然后为它设置一个合适的宽度和高度。如果你还需要在图片上面放一些文字,可以通过CSS来控制它们的位置。


<a class="images_tooltip" href="">IMAGES<span><img height="100"  src="img/cat.jpg" width="70"></span></a>

附件下载:(密码:lPMc3r)
附件下载

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/562.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:
顶部 评论 底部