Bootstrap 提示工具（Tooltip）插件

Bootstrap提示工具（Tooltip）插件当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受JasonFrame写的jQuery.tipsy的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用CSS实现动画效果，用data属性存储标题信息。如果您想要单独引用该插件的功能，那么您需要引用tooltip.js。或者，正如Bootstrap插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。用法提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：通过data属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加data-toggle="tooltip"即可。锚的title即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。<ahref="#"data-toggle="tooltip"title="Exampletooltip">请悬停在我的上面</a>通过JavaScript：通过JavaScript触发提示工具（tooltip）：$('#identifier').tooltip(options)提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯CSS插件。如需使用该插件，您必须使用jquery激活它（读取javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：$(function(){$("[data-toggle='tooltip']").tooltip();});实例下面的实例演示了通过data属性使用提示工具（Tooltip）插件的用法。实例<h4>提示工具（Tooltip）插件-锚</h4>这是一个<ahref="#"class="tooltip-test"data-toggle="tooltip"title="默认的Tooltip">默认的Tooltip</a>.这是一个<ahref="#"class="tooltip-test"data-toggle="tooltip"data-placement="left"title="左侧的Tooltip">左侧的Tooltip</a>.这是一个<ahref="#"data-toggle="tooltip"data-placement="top"title="顶部的Tooltip">顶部的Tooltip</a>.这是一个<ahref="#"data-toggle="tooltip"data-placement="bottom"title="底部的Tooltip">底部的Tooltip</a>.这是一个<ahref="#"data-toggle="tooltip"data-placement="right"title="右侧的Tooltip">右侧的Tooltip</a><br><h4>提示工具（Tooltip）插件-按钮</h4><buttontype="button"class="btnbtn-default"data-toggle="tooltip"title="默认的Tooltip">默认的Tooltip</button><buttontype="button"class="btnbtn-default"data-toggle="tooltip"data-placement="left"title="左侧的Tooltip">左侧的Tooltip</button><buttontype="button"class="btnbtn-default"data-toggle="tooltip"data-placement="top"title="顶部的Tooltip">顶部的Tooltip</button><buttontype="button"class="btnbtn-default"data-toggle="tooltip"data-placement="bottom"title="底部的Tooltip">底部的Tooltip</button><buttontype="button"class="btnbtn-default"data-toggle="tooltip"data-placement="right"title="右侧的Tooltip">右侧的Tooltip</button><script>$(function(){$("[data-toggle='tooltip']").tooltip();});</script>尝试一下?结果如下所示：选项有一些选项是通过Bootstrap数据API（BootstrapDataAPI）添加或通过JavaScript调用的。下表列出了这些选项：选项名称类型/默认值Data属性名称描述animationboolean默认值：truedata-animation提示工具使用CSS渐变滤镜效果。htmlboolean默认值：falsedata-html向提示工具插入HTML。如果为false，jQuery的text方法将被用于向dom插入内容。如果您担心XSS攻击，请使用text。placementstring|function默认值：topdata-placement规定如何定位提示工具（即top|bottom|left|right|auto）。当指定为auto时，会动态调整提示工具。例如，如果placement是"autoleft"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。selectorstring默认值：falsedata-selector如果提供了一个选择器，提示工具对象将被委派到指定的目标。titlestring|function默认值：''data-title如果未指定title属性，则title选项是默认的title值。triggerstring默认值：'hoverfocus'data-trigger定义如何触发提示工具：click|hover|focus|manual。您可以传递多个触发器，每个触发器之间用空格分隔。delaynumber|object默认值：0data-delay延迟显示和隐藏提示工具的毫秒数-对manual手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：delay:{show:500,hide:100}containerstring|false默认值：falsedata-container向指定元素追加提示工具。实例：container:'body'方法下面是一些提示工具（Tooltip）插件中有用的方法：方法描述实例Options:.tooltip(options)向元素集合附加提示工具句柄。$().tooltip(options)Toggle:.tooltip('toggle')切换显示/隐藏元素的提示工具。$('#element').tooltip('toggle')Show:.tooltip('show')显示元素的提示工具。$('#element').tooltip('show')Hide:.tooltip('hide')隐藏元素的提示工具。$('#element').tooltip('hide')Destroy:.tooltip('destroy')隐藏并销毁元素的提示工具。$('#element').tooltip('destroy')实例下面的实例演示了提示工具（Tooltip）插件方法的用法。实例<divstyle="padding:100px100px10px;">这是一个<ahref="#"class="tooltip-show"data-toggle="tooltip"title="show">Tooltip方法show</a>.这是一个<ahref="#"class="tooltip-hide"data-toggle="tooltip"data-placement="left"title="hide">Tooltip方法hide</a>.这是一个<ahref="#"class="tooltip-destroy"data-toggle="tooltip"data-placement="top"title="destroy">Tooltip方法destroy</a>.这是一个<ahref="#"class="tooltip-toggle"data-toggle="tooltip"data-placement="bottom"title="toggle">Tooltip方法toggle</a>.<br><br><br><br><br><br><pclass="tooltip-options">这是一个<ahref="#"data-toggle="tooltip"title="<h2>'amHeader2</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-optionsa").tooltip({html:true});});</script></div>尝试一下?结果如下所示：事件下表列出了提示工具（Tooltip）插件中要用到