Bootstrap封装了不仅封装了漂亮的新式库，同时也提供了很多有用的jQuery插件，Tooltip就是其中很常见也很实用的小功能之一。
本文将简单为大家介绍一下ToolTip的在页面中的使用。
完整代码如下：
<!DOCTYPE>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bootstrap-tooltip使用实例</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
<script>
$(function () {
$('.tooltip-demo').tooltip({
selector: "a[rel=tooltip]"
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<h1>Tooltip的常规使用</h1>
<p class="well tooltip-demo">Tight pants next level keffiyeh <a title="Default tooltip" href="#" rel="tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" data-original-title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a title="Another one here too" href="#" rel="tooltip">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" data-original-title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div>
</div>
</body>
</html>
完整代码如下：
<!DOCTYPE>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bootstrap-tooltip使用实例</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
<script>
$(function () {
$('.tooltip-directions').tooltip({
selector: "a[rel=tooltip]"
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<h1>Tooltip位置显示不同方向</h1>
<ul class="inline tooltip-directions">
<li><a href="#" rel="tooltip" data-original-title="Tooltip on top" data-placement="top">Tooltip on top</a></li>
<li><a href="#" rel="tooltip" data-original-title="Tooltip on right" data-placement="right">Tooltip on right</a></li>
<li><a href="#" rel="tooltip" data-original-title="Tooltip on bottom" data-placement="bottom">Tooltip on bottom</a></li>
<li><a href="#" rel="tooltip" data-original-title="Tooltip on left" data-placement="left">Tooltip on left</a></li>
</ul>
</div>
</div>
</body>
</html>