Bootstrap学习js插件篇之提示框

￡神魔★判官ぃ 2022-08-27 03:58 232阅读 0赞

## 案例 ##

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

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

代码段：

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

<table style="border-collapse:collapse; border-spacing:0px; max-width:100%; background-color:transparent; width:847px; margin-bottom:20px; border:1px solid rgb(221,221,221)"> 
 <thead style=""> 
  <tr style=""> 
   <th style="padding:8px; line-height:1.428571429; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221); width:100px"> 名称</th> 
   <th style="padding:8px; line-height:1.428571429; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221); width:100px"> 类型</th> 
   <th style="padding:8px; line-height:1.428571429; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221); width:50px"> 默认值</th> 
   <th style="padding:8px; line-height:1.428571429; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221)"> 描述</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> animation</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> boolean</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> true</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> apply a CSS fade transition to the tooltip</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> html</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> boolean</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> false</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> Insert HTML into the tooltip. If false, jQuery's&nbsp;<code style="font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:2px 4px; color:rgb(199,37,78); white-space:nowrap; background-color:rgb(249,242,244)">text</code>&nbsp;method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> placement</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> string | function</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> 'top'</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> how to position the tooltip - top | bottom | left | right | auto.&nbsp;<br style=""> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> selector</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> string</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> false</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> If a selector is provided, tooltip objects will be delegated to the specified targets.</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> title</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> string | function</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> ''</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> default title value if&nbsp;<code style="font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:2px 4px; color:rgb(199,37,78); white-space:nowrap; background-color:rgb(249,242,244)">title</code>&nbsp;attribute isn't present</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> trigger</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> string</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> 'hover focus'</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> delay</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> number | object</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> 0</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> <p style="margin-top:0px; margin-bottom:10px; line-height:2">delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p> <p style="margin-top:0px; margin-bottom:10px; line-height:2">If a number is supplied, delay is applied to both hide/show</p> <p style="margin-top:0px; margin-bottom:10px; line-height:2">Object structure is:&nbsp;<code style="font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:2px 4px; color:rgb(199,37,78); white-space:nowrap; background-color:rgb(249,242,244)">delay: { show: 500, hide: 100 }</code></p> </td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> container</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> string | false</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> false</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> <p style="margin-top:0px; margin-bottom:10px; line-height:2">Appends the tooltip to a specific element. Example:&nbsp;<code style="font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:2px 4px; color:rgb(199,37,78); white-space:nowrap; background-color:rgb(249,242,244)">container: 'body'</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

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

### 标记 ###

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

### 方法 ###

#### $().tooltip(options) ####

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

#### .tooltip('show') ####

展示工具提示。

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

#### .tooltip('hide') ####

隐藏工具提示。