提示冒泡

提示冒泡受启发自Jason Frame开发的极好的jQuery Tipsp插件，它是一个改进版本，不依赖于图片，使用CSS3实现动画，利用data-attribute实现本地化标题存储。

概述

在使用提示冒泡插件的时候你需要知道这些：

• 提示冒泡依赖第三方库Tether实现定位。你必须在bootstrap.js之前调用 tether.min.js，才能使提示冒泡起作用。
• 出于性能的原因，提示冒泡是选择性加入的，所以你必须自己初始化它们。
• 标题零长度的提示冒泡不会显示出来。
• 指定container: 'body'以避免复杂组件（比如说输入框组，按钮组，等等）中的渲染问题。
• 在隐藏的元素上触发的提示冒泡不会起作用。
• 如果从一个跨多行的链接上触发提示冒泡，提示冒泡将居中。在<a>上使用white-space:nowrap;可以避免这种情况。

都记住了？好极了。让我们用一些例子看看它们是如何运作的。

示例：在任何地方启用提示冒泡

在网页上初始化所有的提示冒泡的一个途径是用data-toggle属性选中它们：

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

互动演示

把鼠标停放在链接上，可以看到这些提示冒泡：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

用法

提示冒泡插件根据需要生成内容和标记，默认将提示冒泡放在触发元素后面。

利用JavaScript触发提示冒泡：

$('#example').tooltip(options)

标记

如果你想要一个提示冒泡，只有HTML元素中的data属性和title属性是必不可少的标记。提示冒泡生成的标记很简单，虽然它确实需要一个位置（默认情况下被插件设置为顶部）。

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

选项

可以利用data属性或者JavaScript传递选项。如果用data属性，请把选项名追加到data-后面，比如说写成data-animation=""。

方法

$().tooltip(options)

对一个元素集附加一个提示冒泡处理程序。

.tooltip(‘show’)

显示一个元素的提示冒泡。在提示冒泡真正显示之前返回给调用者（也就是，在shown.bs.tooltip事件发生之前）。这被视为提示冒泡的一次“人为”触发。零长度标题的提示冒泡不会显示。

$('#element').tooltip('show')

.tooltip(‘hide’)

隐藏一个元素的提示冒泡。在提示冒泡真正隐藏之前返回给调用者（也就是，在hidden.bs.tooltip事件发生之前）。这被视为提示冒泡的一次“人为”触发。

$('#element').tooltip('hide')

.tooltip(‘toggle’)

切换一个元素的提示冒泡。在提示冒泡真正显示或隐藏之前返回给调用者（也就是，在 shown.bs.tooltip或hidden.bs.tooltip事件发生之前）。这被视为提示冒泡的一次“人为”触发。

$('#element').tooltip('toggle')

.tooltip(‘destroy’)

隐藏并销毁一个元素的提示冒泡。使用委派的提示冒泡（创建时使用了selector选项）不能在后代触发元素上被单独销毁。

$('#element').tooltip('destroy')

事件

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})