Bootstrap Popover 外掛
Popover 外掛
Popover 外掛類似於工具提示；它是一個在使用者單擊某個元素時出現的彈出框。不同之處在於，Popover 可以包含更多內容。
提示：外掛可以單獨包含（使用 Bootstrap 的獨立 "popover.js" 檔案），也可以全部包含（使用 "bootstrap.js" 或 "bootstrap.min.js"）。
如何建立 Popover
要建立 Popover，請向元素新增 data-toggle="popover" 屬性。
使用 title 屬性指定 Popover 的標題文字，並使用 data-content 屬性指定要在 Popover 主體中顯示的文字。
<a href="#" data-toggle="popover" title="彈出框標題" data-content="彈出框中的一些內容">切換彈出框</a>
注意：Popover 必須使用 jQuery 進行初始化：選擇指定的元素並呼叫 popover() 方法。
以下程式碼將啟用文件中的所有 Popover
示例
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
自己動手試一試 »
定位 Popover
預設情況下，Popover 將顯示在元素的右側。
使用 data-placement 屬性將 Popover 的位置設定為元素上方、下方、左側或右側。
示例
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
自己動手試一試 »
提示：您還可以將 data-placement 屬性設定為 "auto"，這樣瀏覽器將決定 Popover 的位置。例如，如果值為 "auto left"，Popover 將盡可能顯示在左側，否則顯示在右側。
關閉 Popover
預設情況下，當您再次單擊元素時，Popover 將關閉。但是，您可以使用 data-trigger="focus" 屬性，該屬性將在單擊元素外部時關閉 Popover。
示例
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
自己動手試一試 »
提示：如果您希望在滑鼠指標懸停在元素上時顯示 Popover，請使用 data-trigger 屬性，其值為 "hover"。
示例
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
自己動手試一試 »
完整的 Bootstrap Popover 參考
有關所有 Popover 選項、方法和事件的完整參考，請訪問我們的 Bootstrap JS Popover 參考。
