DEMO:

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;
}
.tooltip:after{
display:block;
position:absolute;
left:20px;
top:20px;

width:0;
height:0;
border-style:solid;
border-width:4px;
border-color:red green snow black;
}
.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;
}
.tooltip-wrapper>span:hover a{color:rgb(204,153,255) !important;}
-->

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:; 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:;
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:;
} /*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:;
transition:all 0.2s ease-in-out;
}

纯CSS实现Tooltip的更多相关文章

  1. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  2. 纯CSS 实现tooltip 内容提示信息效果

    Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...

  3. 纯CSS实现tooltip提示框,CSS箭头及形状

    本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

  4. 纯CSS tooltip 提示

    一般的tooltip,使用超链接的title,或者是css+javascript生成. 如果页面布局合理,样式结构清晰,可以使用纯CSS的提示. demo如下: a.tooltip { positio ...

  5. 纯CSS箭头,气泡

    原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...

  6. 纯css、js 的H5页面对接echarts

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

  7. Sultana后记:纯css也能写col,select,datepicker,carousel...

    未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...

  8. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

随机推荐

  1. maven出现 -Dmaven.multiModuleProjectDirectory system propery错误

    1.使用myeclipse10整合maven插件时出现错误: -Dmaven.multiModuleProjectDirectory system propery is not set. Check ...

  2. uicollectionview registerclass vs registernib

    当cell是用代码实现的时候用registerclass,当cell是用xib文件实现的时候用registernib

  3. Nginx内置变量以及日志格式变量参数详解

    $args #请求中的参数值 $query_string #同 $args $arg_NAME #GET请求中NAME的值 $is_args #如果请求中有参数,值为"?",否则为 ...

  4. 配置Nginx支持SSL SNI(一个IP绑定多个证书) 以及Haproxy实现多域名证书

    概述 传统的每个SSL证书签发,每个证书都需要独立ip,假如你编译openssl和nginx时候开启TLS SNI (Server Name Identification) 支持,这样你可以安装多个S ...

  5. select下拉框选中问题

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...

  6. npm install socket.io遇到的问题

    解决方法: 输入 npm install socket.io 前,先执行下面 npm config set proxy "http://yourip:port" 生产的npm-de ...

  7. 学习ExtJs教程初级

    搭建环境:myeclipse10 +tomcat6+jdk6 新建一个webproject(启动myeclipse:file--new--webproject) 导入相关的js和css(百度下载就好. ...

  8. gridview填充剩下的空间

    设置不要在控间中滑动: public class DeliverGridView extends GridView { public DeliverGridView(Context context, ...

  9. 浅谈WebSocket

    WebSocket是H5提出的为了解决客户端和服务器双工通信的方法.在我们使用HTTP协议通信时,客户端主动向服务器发送请求,得到服务器端数据.为了与服务器端数据保持一致,之前常用的有轮询和长轮询两种 ...

  10. ubuntu apt 安装

    1. ./autogen.sh: libtoolize: not found sudo apt-get install aptitude sudo aptitude install libtool 2 ...