文章转载自 []
链接地址Bootstrap 工具提示（Tooltip）插件
当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件是受Jason Frame写的jQuery.tipsy的启发。工具提示（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。
如果您想要单独引用该插件的功能，那么您需要引用tooltip.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。
用法
工具提示（Tooltip）插件根据需求生成内容和标记，默认情况下是把工具提示（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加工具提示（tooltip）：
通过 data 属性：如需添加一个工具提示（tooltip），只需向一个锚标签添加data-toggle="tooltip"即可。锚的 title 即为工具提示（tooltip）的文本。默认情况下，插件把工具提示（tooltip）设置在顶部。
<a rel="nofollow" href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
通过 JavaScript：通过 JavaScript 触发工具提示（tooltip）：
$('#identifier').tooltip(options)
工具提示（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的工具提示（tooltip）：$(function () { $("[data-toggle='tooltip']").tooltip(); });
实例
下面的实例演示了通过 data 属性使用工具提示（Tooltip）插件的用法。
<!DOCTYPE html><html><head><title>Bootstrap 实例 - 工具提示（Tooltip）插件</title><link rel="nofollow" href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script></head><body><h4>工具提示（Tooltip）插件 - 锚</h4>这是一个 <a rel="nofollow" href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.这是一个 <a rel="nofollow" href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a>.这是一个 <a rel="nofollow" href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a>.这是一个 <a rel="nofollow" href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</a>.这是一个 <a rel="nofollow" href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</a><br><h4>工具提示（Tooltip）插件 - 按钮</h4><button type="button" class="btn btn-default" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</button><script>$(function () { $("[data-toggle='tooltip']").tooltip(); });</script></body></html>
结果如下所示：
选项
有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：
方法
下面是一些工具提示（Tooltip）插件中有用的方法：
实例
下面的实例演示了工具提示（Tooltip）插件方法的用法。
<!DOCTYPE html><html><head><title>Bootstrap 实例 - 工具提示（Tooltip）插件方法</title><link rel="nofollow" href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script></head><body><div style="padding: 100px 100px 10px;">这是一个 <a rel="nofollow" href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip 方法 show</a>.这是一个 <a rel="nofollow" href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip 方法 hide</a>.这是一个 <a rel="nofollow" href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip 方法 destroy</a>.这是一个 <a rel="nofollow" href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip 方法 toggle</a>.<br><br><br><br><br><br><p class="tooltip-options" >这是一个 <a rel="nofollow" href="#" data-toggle="tooltip" title="<h2>'am Header2</h2>">Tooltip 方法 options</a>.</p><script>$(function () { $('.tooltip-show').tooltip('show');});$(function () { $('.tooltip-hide').tooltip('hide');});$(function () { $('.tooltip-destroy').tooltip('destroy');});$(function () { $('.tooltip-toggle').tooltip('toggle');});$(function () { $(".tooltip-options a").tooltip({html : true });});</script><div></body></html>
结果如下所示：
事件
下表列出了工具提示（Tooltip）插件中要用到的事件。这些事件可在函数中当钩子使用。
实例
下面的实例演示了工具提示（Tooltip）插件事件的用法。
<!DOCTYPE html><html><head><title>Bootstrap 实例 - 工具提示（Tooltip）插件事件</title><link rel="nofollow" href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script></head><body><h4>工具提示（Tooltip）插件 - 锚</h4>这是一个 <a rel="nofollow" href="#" class="tooltip-show" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.<script>$(function () { $('.tooltip-show').tooltip('show');});$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {alert("Alert message on show");})});</script></body></html>
结果如下所示：
本文转载自： w3cschool
