Bootstrap学习js插件篇之提示框

标签：des   style   blog   http   color   io   os   使用   ar   

案例

受到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>  

预览：

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

四个展示方位

用法

通过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=""。

标记

<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…
})

Bootstrap学习js插件篇之提示框

标签：des   style   blog   http   color   io   os   使用   ar   

原文地址：http://www.cnblogs.com/ranzige/p/4021455.html