saber 酱的抱枕

Fly me to the moon

08/15
2015
学习

bootstrap的tooltip插件使用

saber 撰写 无回复 1,372次查看


百度了一些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实现的，无需图片，所以我们只需要处理代码就行了。
Read More →

bootstrap的tooltip插件使用