08/15
2015
百度了一些tooltip插件，后来感觉bootstrap的这个tooltip插件比较顺眼，于是鼓捣一番，会简单的使用了。
上例的代码如下：
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script src="/f/bootstrap-tooltip.js"></script>
<link rel="stylesheet" href="/f/bootstrap_tooltip.css">
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); }); //启用页面中的所有的工具提示（tooltip）
</script>
<img src="/f/穹妹%20小图.jpg" alt="" data-toggle="tooltip" data-placement="bottom" title="不要羡慕我的床">
<br><br>
<a href="saber.我爱你" data-toggle="tooltip" title="这是一个hentai网站">saber酱的抱枕</a>
<br><br>
<span data-toggle="tooltip" data-placement="right" title="原来saber是我的剑鞘啊~">最爱saber啦~</span>
<br><br>
<div data-toggle="tooltip" title="练习~练习~">练习~练习~</div>
原理是触发时添加html元素和class类，提示的样式是css实现的，无需图片，所以我们只需要处理代码就行了。
首先引入必须的js和css。例中的css是我从bootstrap的css文件中提取出来的。如果为了这一个功能而引入整个css文件（98K），就显得太大了。
然后在需要使用tooltip的元素上添加data-toggle="tooltip"属性，并且设置title属性内的提示：
<a href="http://saber.我爱你" data-toggle="tooltip" title="这是一个hentai网站">saber酱的抱枕</a>
最后启用tooltip：
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); }); //启用页面中的所有的工具提示（tooltip）
</script>
到这里就完成了。
如果需要调整提示显示的位置，可以在html标签内设置data-placement选项：
data-placement="top|bottom|left|right|auto"
如果需要更改提示的颜色、字体等样式，去css里面修改就行了。
话说试了试引用bootstrap.js的cdn，发现引入最新版本后没这个效果了，原因未明，难道取消这个功能了？
