纯CSS实现Tooltip

在编写HTML时，使用a标签的title属性浏览器会默认地实现Tooltip的功能。

<a href="" title="Example of Tooltip">Tooltip</a>

该代码的效果： Tooltip

这样的实现存在两个问题：

title里的内容显示有延迟（不同的浏览器延迟时间不同）title的内容无法风格化（确切的说，要自定义风格也是可以的，使用css和js）

我主要是为了解决第一个问题才选择使用纯CSS来实现Tooltip效果。

<a href="#" >鼠标悬浮显示tooltip<span class="black">这里是tooltip的内容</span></a>

css要做的是两件事

默认a标签下的span隐藏， 鼠标悬浮在a上时让span显示给span添加一个自定义的风格化class a span{ display:none; color:#fff; background:rgba(51,51,51,0.75); border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px; text-align:center; position: absolute; z-index:10; padding:5px; overflow: visible; } a { display: inline-block;} a:hover span{ display:block; } span.black{ background:rgba(0,0,0, 0.75); border:1px solid #1E5799; }