当您想要描述一个链接的时候，使用提示工具插件是一个不错的选择。Bootstrap提示工具插件做了很多的改进，例如不需要依赖图像，而是改变Css动画效果，用data属性来存储标题信息。
用法
提示工具(Tooltip)插件根据要求生成内容和标记，默认情况是把提示工具放在它们触发元素的后面，您可以有以下两种方式来添加提示工具。
1、通过data属性，如需要添加一个提示工具，只需要向一个锚链标签添加data-toggle="tooltip"即可。锚的title即为提示工具(tooltip)的文本，默认情况下，插件把提示工具(tooltip)设置在顶部。
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：提示工具(Tooltip)插件</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:20px">
<h3>提示工具(Tooltip)插件-锚</h3>
这是一个<a href="#" data-toggle="tooltip" title="默认的Tooltip" class="tooltip-test">默认的Tooltip</a>.
这是一个<a href="#" data-toggle="tooltip" data-placement="left" title="左则的Tooltip" class="tooltip-test">左则的Tooltip</a>.
这是一个<a href="#" data-toggle="tooltip" data-placement="right" title="右则的Tootip" class="tooltip-test">右则的Tooltip</a>.
这是一个<a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的Tooltip" class="tooltip-test">底部的Tooltip</a>.
这是一个<a href="#"data-toggle="tooltip"data-placement="top"title="顶部的Tooltip"class="tooltip-test">顶部的Tooltip</a>.
<h3>提示工具(Tooltip)插件-按钮</h3>
<button type="button" class="btn btn-default"data-toggle="tooltip"title="默认的Tooltip">默认的Tooltip</button>
<button type="button"class="btn btn-success"data-toggle="tooltip"data-placement="left"title="左则的Tooltip">左则的Tooltip</button>
<button type="button"class="btn btn-primary"data-toggle="tooltip"data-placement="right"title="右则的Tootip">右则的Tootip</button>
<button type="button" class="btn btn-warning"data-toggle="tooltip"data-placement="bottom"title="底部的Tooltip">底部的Tooltip</button>
<button type="button"class="btn btn-info"data-toggle="tooltip"data-placement="top"title="顶部的Tooltip">顶部的Tooltip</button>
</div>
<script>
$(document).ready(function () {
$("[data-toggle='tooltip']").tooltip();
})
</script>
</body>
</html>
扫一扫
7127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
