码迷,mamicode.com
首页 > Web开发 > 详细

纯CSS实现Tooltip

时间:2014-06-24 15:02:38      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   ext   color   

DEMO:

ABAngel Beats! SAOSword Art Online GTOGreat Teacher Onizuka TRCTsubasa Reservoir Chronicle D.C.Da Capo

tootip这个东西,真是什么地方都用得着,这段时间就不可避免的遇到了。

首先考虑一下tooltip的基本表现:

移动到某个元素上就会弹出的元素

这应该是最简单的tooltip了。

首先是移动到某个元素上触发效果,这里想必会用到:hover伪类。但是对其作出反应的却是另外一个元素,这里就需要实现一个联动的效果,最简单的方法,那就是嵌套咯,用外层元素做容器,使用:hover伪类派生的方法来让容器内部的元素也发生变化,在这儿就是让tooltip显示出来喽~

于是,就先来弄几个个自带容器的tooltip吧。

HTML:

<div class="tooltip-wrapper">
    <span><a href="#">AB</a><span class="tooltip">Angel Beats!</span></span>
    <span><a href="#">SAO</a><span class="tooltip">Sword Art Online</span></span>
    <span><a href="#">GTO</a><span class="tooltip">Great Teacher Onizuka</span></span>
    <span><a href="#">TRC</a><span class="tooltip">Tsubasa Reservoir Chronicle</span></span>
    <span><a href="#">D.C.</a><span class="tooltip">Da Capo</span></span>
</div>

接下来就是关键的CSS了,有这几个关键的地方:

  • 一般情况下tooltip是不应该显示出来的,所以最简单的就是将它的透明度设置为0(opacity:0;)。
  • 对于tooltip的定位,在这个演示里面tooltip在其容器的正上方出现,为了给tooltip设置相对于容器的定位,将它的父元素设置为相对定位(position:relative;)。
  • 在tooltip的父元素处于光标下的时候让tooltip显示出来,这个样式就通过父元素的:hover伪类派生来设定。
  • 为了让tooltip的出现来得和谐点,给它加个transition

CSS:

.tooltip-wrapper{
    margin:5em 2em;
    font-size:24px;
}

/*Normal State*/

.tooltip-wrapper>span{
    position:relative;
    display:inline-block;
    height:3em;
    width:3em;
    margin:0 0.4em;
    line-height:3em;
    text-align:center;
    font-weight:600;

    color:white;
    background:rgba(204,153,255,0.8);
    border: 6px solid rgba(223,191,255,0.8);
    border-radius:3em;
    box-shadow:0 0 5px rgba(223,191,255,0.8);
}
.tooltip{
    position:absolute;
    top:0;
    left:-25%;

    width:5em;
    line-height:1em;
    font-size:16px;
    text-align:center;
    padding:0.3em 0.5em;

    color:snow;
    background:#bbb;
    border:2px solid rgba(147,126,168,0.8);
    border-radius:3px;

    opacity:0;
}

/*Active State*/

.tooltip-wrapper>span:hover{
    color:rgba(133,101,168,0.8);
    background:rgba(255,255,255,0.8);
    border:6px solid rgba(135,101,168,0.8);
    border-radius:3em;
    box-shadow:0 0 20px rgba(223,191,255,0.8);

    transition:all 0.2s ease-in-out;
}
.tooltip-wrapper>span:hover .tooltip{
    top:-5em;

    border-radius:5px;

    opacity:1;
    transition:all 0.2s ease-in-out;
}

纯CSS实现Tooltip,布布扣,bubuko.com

纯CSS实现Tooltip

标签:style   class   blog   code   ext   color   

原文地址:http://www.cnblogs.com/frantic1048/p/pure-css-tooltip.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!