纯css实现tooltip提示

先看效果：

 

http://codepen.io/Jaosn/details/VLwqqK

在a标签里面增加em标签：

 

<a class="tooltip" href="#">
  Link content<em>this is tooltip.this is tooltip.</em>
</a>

 

 

css：

.tooltip {
 position: relative;
}
.tooltip:hover>em{
  display:inline-block;
}
.tooltip em {
  display:none;
  position: absolute;
  bottom: 24px;
  left:50%;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  width:100px;
  padding: 2px 4px;
  margin-left:-54px;
  background: #000;
  opacity:.7;
  text-align: left;
}
.tooltip em::before {
  content:'';
  position: absolute;
  bottom: -20px;
  left:50%;
  width:0;
  height:0;
  /*triangle*/
  border-top: 10px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left:-5px;
}
.tooltip em::after {
  content:'';
  position: absolute;
  bottom: -19px;
  left:50%;
  width:0;
  height:0;
  /*triangle*/
  border-top: 10px solid #000;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left:-5px;
}

 下箭头的描边就是两个移位的三角形叠起来的。

有兴趣可以直接去codepen改动看看效果：http://codepen.io/Jaosn/pen/doywrp