Bootstrap学习js插件篇之提示框

案例

受到Jason Frame开发的jQuery.tipsy插件的启发，我们才把这个工具提示插件做的更好，而且此插件不依赖图片，只是使用CSS3来实现动画效果，并使用data属性存储标题。

将鼠标悬停到下面的链接上就可以看到工具提示了：

代码段：

[javascript] view plaincopy

1. <script type="text/javascript">
2. $(function() {
3. $(‘.tooltip-demo‘).tooltip({
4. selector: "[data-toggle=tooltip]",
5. container: "body"
6. })
7. $("#testt").tooltip({})
8. $(‘a‘).tooltip()
9. })
10. </script>

[html] view plaincopy

1. <div class="bs-example tooltip-demo">
2. <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh
3. <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a>
4. haven‘t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
5. Farm-to-table seitan, mcsweeney‘s fixie sustainable quinoa 8-bit american apparel
6. <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a>
7. terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
8. Tofu biodiesel williamsburg marfa, four loko mcsweeney‘s cleanse vegan chambray.    A really ironic artisan
9. <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>
10. , scenester farm-to-table banksy Austin
11. <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a>
12. freegan cred raw denim single-origin coffee viral.
13. </p>
14. </div>

预览：

图片无法上传了。。。。。。。。我去去去去去去去。。。。。！！

四个展示方位

左侧Tooltip 上方Tooltip 下方Tooltip 右侧Tooltip

选择性加入的功能

出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说你必须自己初始化他们。

工具提示与按钮组和输入框组联合使用时需要一些特殊设置

在.btn-group 或 .input-group内的元素上使用工具提示时，你需要指定container: ‘body‘选项以避免不需要的副作用（例如，当工具提示显示之后，与其合作的页面元素可能变得更宽或是去圆角）。

在禁止使用的页面元素上使用工具提示时需要额外增加一个元素将其包裹起来

为了给disabled 或.disabled元素添加工具提示，将需要增加工具提示的页面元素包裹在一个<div>中，然后对这个<div>元素应用工具提示。

用法

通过JavaScript激活工具提示：

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

Markup

The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).

<div class="tooltip">
  <div class="tooltip-inner">
    Tooltip!
  </div>
  <div class="tooltip-arrow"></div>
</div>

选项

可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-animation=""。

对单个工具提示使用data属性

使用data属性可以为单个工具提示指定额外选项，如下所示。

标记

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

方法

$().tooltip(options)

为一组元素应用工具提示。

.tooltip(‘show‘)

展示工具提示。

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

.tooltip(‘hide‘)

隐藏工具提示。

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

.tooltip(‘toggle‘)

展示或隐藏工具提示。

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

.tooltip(‘destroy‘)

隐藏并销毁工具提示。

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

事件

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