## 彈出框 popover.js * 彈出提示（popover.js）是工具提示的子類，它比工具提示多了一個 content 參數，是工具提示插件的拓展，并且彈出框依賴于工具提示插件tooltip.js，如果你定制了 Bootstrap，就一定要將依賴的插件編譯進去。 * 初始化。由于性能的原因，工具提示和彈出框的 data 編程接口（data api）是必須要手動初始化的。在一個頁面上一次性初始化所有彈出框的方式是通過`data-toggle`屬性選中他們： ```js $(function?()?{ ? $('[data-toggle="popover"]').popover(); }) ``` 你也可以單獨初始化某個元素上的彈出提示對象。比如，以下代碼就只激活 a標簽的鏈接元素上定義的彈出提示： ```html <a href="#" data-toggle="popover" title="Hello" data-content="Hi, Long time no see, how are you?">Say Hello</a> ``` ```js $(function(){ $('a').popover(); }) ``` 與工具提示不同的是，默認情況下，在鼠標單擊鏈接時，才會顯示工具提示。并且，彈出提示的默認位置在目標對象的右側。運行效果如下：  通過 data-placement 屬性，可以設置提示信息的顯示位置，可選值有 top | bottom | left | right。如圖所示：  * 默認情況下，彈出提示一旦顯示，就不會再隱藏。如果希望點擊空白區域讓彈出框消失，只需設置`data-trigger="focus"`屬性即可。為了更好的跨瀏覽器和跨平臺效果，你必須使用`<a>`標簽，而不能使用`<button>`標簽，并且，還必須包含`role="button"`和`tabindex`屬性。 ```html <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的彈出框</a> ``` 設置`data-trigger="focus"`屬性以后，在鏈接上點擊，會彈出提示信息，點擊鏈接和提示框之外的空白區域，提示框便自動消失。 ***** **彈出提示插件的選項** Bootstrap為工具提示插件提供了 11 個選項，所有的選項都可以通過 data 屬性或JavaScript進行設置。 | 名稱 | 類型 | 默認值 | 說明 | | --- | --- | --- | --- | | animation | boolean | true | 為工具提示應用CSS淡入淡出過渡效果 | | container | string false | false | 將提示條附加到特定元素，如 container: 'body' | content|string \| function|''|如果data-content屬性不存在，則使用這個默認值 | delay | number object | 0 | 延遲顯示和隱藏提示條的時間（毫秒）——手動觸發提示條時無效如果只指定一個數值，則隱藏和顯示都使用該數值。對象的結構為 delay: { show: 500, hide: 100 }| | html | boolean | false | 提示條支持插入 HTML。如果取值為 false，則使用 jQuery 的 text 方法插入文本。如果擔心XSS攻擊，那就使用文本 | | placement | string function | 'top' | 設置提示條的位置，取值：top | bottom | left | right | | selector | string | false | 如果提供了選擇器，在觸發該選擇器時才顯示提示信息 | | template | string | \[1\] | 使用HTML面板創建工具提示。工具提示的title將被注入到.tooltip-inner中。.tooltip-arrow成為工具提示的箭頭。最外層的包裝元素應該擁有.tooltip類| | title | string function | '' | 如果title屬性不存在，則使用默認值 '' 。要注意單引號與雙引號的嵌套關系| |trigger|string|'hover focus'|工具提示的觸發方式：click 、hover 、 focus 、manual。可以傳入多個觸發方式，以空格分隔。manual不能與其他觸發方式組合使用|viewportstring | object | function{ selector: 'body', padding: 0 }使工具提示始終在元素的邊界之內。 viewport|string \| object \| function|{ selector: 'body', padding: 0 }|使工具提示始終在元素的邊界之內。 ```markdown 表中 [1] 表示： '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' ``` 因為彈出框依賴工具提示，它繼承了工具提示的選項，并且多了'content'這個選項，如上表所示。 其使用選項的方式與工具提示一樣，如下： ```html <a href="##" id="bird">小鳥</a> ``` ```js $('#bird').popover({ html: true, title: '<img src="../img/timg.jpg" width="200px" height="200px"/>', placement: 'bottom', delay: { show: 500, hide: 100 } }); ``` 運行效果如下：  ***** **彈出提示插件的方法** 1、.popover(options) 使用一個可選的對象參數 options調用某個頁面元素的彈出提示。如： ```js $('某個元素').popover({ html:true, title:'<p>一只小鳥</p> <img src="../img/timg.jpg" width="170px" height="170px"/>', placement:'bottom', delay:{show:500,hide:100} }) ``` 2、.popover('show') 手動觸發某個頁面元素的彈出提示，如： ```js $('#element').popover('show') ``` 3、.popover('hide') 手動隱藏某個頁面元素的彈出提示，如： ```js $('#element').popover('hide') ``` 4、.popover('toggle') 手動打開或隱藏某個頁面元素的彈出提示，如： ```js $('#element').popover('toggle') ``` 5、.popover('destroy') 手動隱藏并銷毀某個頁面元素的彈出提示。如： ```js $('#element').popover('destroy') ``` ***** **彈出框插件的事件** | 事件 | 含義 | | --- | --- | | show.bs.popover | show方法調用之后，立即觸發該事件。 | | shown.bs.popover | 當工具提示已經對用戶可見（并且過渡效果執行完畢）之后，觸發該事件 | | hide.bs.popover | hide方法調用之后，立即觸發該事件 | | hidden.bs.popover | 當工具提示已經被隱藏（并且過渡效果執行完畢）之后，觸發該事件 | | inserted.bs.popover | 當向DOM插入工具提示模板時，在模板插入完成并且show.bs.popover觸發事件之后，觸發該事件。 | ```js $('#myTooltip').on('hidden.bs.popover',?function?()?{ ??? alert("彈框已經隱藏。"); }); ```