其实原理很简单，理解一些伪类和伪元素的看一下就懂了
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；