Pure-CSS-Tooltips是一款跨浏览器HTML5纯CSS工具提示特效。该工具提示特效使用HTML5 data属性和伪元素来将一个元素转换为tooltip，不需要额外的HTML标签和js代码。
使用方法
HTML结构
一个最基本的工具提示的HTML结构如下：
<span data-tooltip="I’m a tooltip">tooltip</span>
主题样式
该tooltip特效内置了4种颜色主题：红色、蓝色、绿色和橙色。
<span data-tooltip-theme="blue" data-tooltip="I’m a blue tooltip">tooltip</span>
<span data-tooltip-theme="green" data-tooltip="I’m a blue tooltip">tooltip</span>
<span data-tooltip-theme="orange" data-tooltip="I’m a blue tooltip">tooltip</span>
<span data-tooltip-theme="red" data-tooltip="I’m a blue tooltip">tooltip</span>
如果你想页面中所有的tooltip都是用统一的主题，可以在<body>元素中添加data-tooltip-theme="blue"等主题data属性。
<body data-tooltip-theme="blue">
字体和对齐
在data-tooltip-theme属性中使用rtl或ltr属性可以是文本右对齐或左对齐。例如：
<span data-tooltip-theme="orange mono lft" data-tooltip="......">tooltip</span>
上面的mono代表字体使用monospace字体族。
替换元素
如果你需要为图片、表单元素等制作tooltip效果，可以在这些元素外包裹一层元素。例如：
<span class="tooltip-wrapper" data-tooltip="A placeholder image generated by placehold.it">
<img src="http://placehold.it/350x150" />
</span>
对于表单和其它元素也可以使用相同的方法。
Pure-CSS-Tooltips工具提示的github地址为：https://github.com/freqdec/Pure-CSS-Tooltips
