案例

為頁面內(nèi)容添加一個(gè)小的覆蓋層，就像 iPad 上的效果一樣，為頁面元素增加額外的信息。

先來看幾個(gè)簡單的靜態(tài)案例效果圖

http://wiki.jikexueyuan.com/project/bootstrap/images/bt4.png" alt="" />

效果比較簡單主要就是靜態(tài)的彈出的小窗體，分為窗體標(biāo)題和窗體內(nèi)容。

<div class="bs-example bs-example-popover">
      <div class="popover top">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover top</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>

      <div class="popover right">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover right</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>

      <div class="popover bottom">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover bottom</h3>

        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>

      <div class="popover left">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover left</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>

      <div class="clearfix"></div>
    </div>

但是我們還是需要給元素設(shè)置簡單的基本布局

<style type="text/css"> .bs-example-popover .popover {
      position: relative;
      display: block; float: left;
      width: 240px;
      margin: 20px;
} </style>

動態(tài)演示

先來看效果圖

http://wiki.jikexueyuan.com/project/bootstrap/images/bt5.png" alt="" />

一個(gè)按鈕，點(diǎn)擊按鈕的時(shí)候就會彈出右側(cè)的小窗體。

看代碼，其實(shí)也很簡單。

 <a id="a2" class="btn btn-lg btn-danger" data-placement="right" data-content="text" title="" href="#" data-original-title="text"> Please Click to toggle popover </a>

就一個(gè) a 標(biāo)簽，但是賦予了按鈕的樣式類，然后給與幾個(gè)屬性，主要用于展示彈出框的：

• 第一個(gè)：data-original-title ——標(biāo)題
• 第二個(gè)：data-content——內(nèi)容
• 第三個(gè)：data-placement——位置（上下左右top、bottom、left、right）

不過現(xiàn)在如果你來運(yùn)行，按鈕是有了，你點(diǎn)擊按鈕彈出框被不會出現(xiàn)，原來很簡單，就是我們還沒有給它初始化，就像上一節(jié)中的 tooltip 一樣的。

只需要添加簡單的 JavaScript 代碼就可以了。

<script type="text/javascript"> $("#a1").popover(); </script>

四個(gè)方向

http://wiki.jikexueyuan.com/project/bootstrap/images/bt6.png" alt="" />

<div  style="margin-left:200px;margin-top:100px;margin-bottom:200px;" class="bs-example tooltip-demo">
      <div class="bs-example-tooltips">
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 左側(cè)彈框 </button>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 上方彈框 </button>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 下方彈框 </button>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 右側(cè)彈框 </button>
      </div>
    </div>

然后用 JavaScript 來激活

<script type="text/javascript"> $("#a1").popover();
      $("[data-toggle=popover]").popover(); </script>

選擇性加入的功能

出于性能方面的考慮，工具提示和彈框組件的 data 屬性 api 是選擇性加入的，也就是說你必須自己初始化他們。

彈出框在按鈕組和輸入框組中使用時(shí)，需要額外的設(shè)置

當(dāng)提示框與 .btn-group 或 .input-group 聯(lián)合使用時(shí)，你需要指定 container: 'body' 選項(xiàng)（見下面的文檔）以避免不需要的副作用（例如，當(dāng)彈出框顯示之后，與其合作的頁面元素可能變得更寬或是去圓角）。

在禁止使用的頁面元素上使用彈出框時(shí)需要額外增加一個(gè)元素將其包裹起來

為了給 disabled 或 .disabled 元素添加彈出框時(shí)，將需要增加彈出框的頁面元素包裹在一個(gè) <div> 中，然后對這個(gè) <div> 元素應(yīng)用彈出框。

用法

通過 JavaScript 啟用彈出框：

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

選項(xiàng)

可以將選項(xiàng)通過 data 屬性或 JavaScript 傳遞。對于 data 屬性，需要將選項(xiàng)名稱放到 data- 之后，例如 data-animation=""。

方法

$().popover(options)

為一組元素初始化彈出框。

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

顯示彈出框。

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

隱藏彈出框。

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

展示或隱藏彈出框。

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

隱藏并銷毀彈出框。

事件

http://wiki.jikexueyuan.com/project/bootstrap/images/bt7.png" alt="" />

$('[data-toggle=popover]').on('shown.bs.popover', function () {
          alert(1);
      })

http://wiki.jikexueyuan.com/project/bootstrap/images/bt8.png" alt="" />