使用css3的attr属性实现一个简单的tooltip提示信息框

当要实现一个hover时显示提示信息的效果时，如果直接用title属性觉得效果太弱，而又不想引入第三方tooltip库，可以通过使用attr属性来实现。直接上主要代码片段吧：

<p>hello  <span data-title="from me...">everyone</span> </p>

span[data-title]{
  position:relative;
}
span[data-title]:hover:before{
  content: attr(data-title);
  position:absolute;
  top:-150%;
  left:50%;
  transform:translateX(-50%);
  white-space: nowrap;
}

这样就实现了一个简单的信息提示框，框中的下三角形可以通过css3用after来实现。