首先html结构：
<div id="container"> <div class="item"> <h1>Hi</h1> <div class="tooltip"> <p>我是一个提示框！</p> <div class="arrow"></div> </div> </div></div>　　首先我们给父级元素container设置一下样式：
#container{width:130px;margin:100px auto 0 auto;}　　然后给div类名为item的设置一下样式：
.item {width:100px; height:100px; margin:15px; background:#73a058; float:left; border-radius:50px;}　　H1元素样式：
h1{display:inline-block;width:100%;height:100%;line-height:100px;text-align:center;color:#fff;font-size:50px;}　　OK ,到现在，我们页面首先展示的内容基本样式设置完毕，剩下的就是tip提示框的样式及效果的实现--------------------------
　　首先我们tip是通过鼠标移动到item上，tip从上往下滑动到item元素的上方，那么我们需要给item设置一个绝对定位，让它定位在item上方，但是不能只定位在上方，因为我们在鼠标滑动上去的时候有一个从上往下的效果，所以需要设置一个负的margin值，至少这个负值要大于item的高度；
.tooltip {width:120px; padding:10px; border-radius:3px; position:absolute; box-shadow:1px 1px 10px 0 #ccc; margin: -400px 0 0 -20px; background:#fff; -webkit-transition:margin .5s ease-in-out; -moz-transition:margin .5s ease-in-out;}　　上面代码中，有的同学不理解为什么会有一个margin值等于-20px的左边距，因为我们item是100的宽度；然而我们tooltip是120的宽度，还有一个10px的padding值，所以一起是140的宽度，如果不进行-20px的位移，那么就不相对于item居中了，所以向左边移动了20px的距离，让整体相对于item居中；
　　还有一个新属性，可能我们在平时用到的很少，因为很多同学可能用transition属性的时候，可能基本上就这样写：transition:2s;这样是一个简写写法，就是告诉元素所有涉及到动画的属性都是2S时间，那么我们这里给了一个限制margin;就是告诉这个元素我只在margin属性上产生这个效果；
　　然后给item设置hover效果：
.item:hover{background:#6d643b;}　　给item下的tooltip设置hover效果：
.item:hover .tooltip { margin:-110px 0 0 -20px; -webkit-transition: margin .25s ease-in-out; -moz-transition: margin .25s ease-in-out;}　　上面的代码：首先选择器讲解，我们item:hover后面写了一个tooltip，意思是我鼠标移动到item元素上，然后给item里面的元素tooltip设置了一些样式，样式就是让tooltip的margin值发生变化，
　　最后一步了：
.arrow { position:absolute; margin:10px 0 0 50px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff;}　　这串代码是实现文中出现的倒三角形状，具体的transparent用法同学们自己去搜用法，这里就不讲解了，
　　OK到这里基本上一个简单的效果就完成了，是不是又学到了css3属性的一些新用法了呢？
同学们也可以去修改效果的，比如说用opacity来实现，用CSS3的transform:scale放大缩小来做，更炫哦