css实现tip提示

原文在这

其实原理很简单，理解一些伪类和伪元素的看一下就懂了

html:

<div title="Tooltip text for first div">啊啊啊</div> 
<div title="Tooltip text for second div">哈哈哈</div>

css：

div:before{ content:attr(title); display:none; }
div:hover::before{ 
  width:200px;
  display:block; 
  background:yellow; 
  border:1px solid black; 
  padding:8px; 
  margin:25px 0 0 10px; 
  position:absolute;
}
div:hover{ z-index:10; position:relative; }

此处和原文有点不同，在div:hover:before中加了个position:absolute；

实例点这里