Bootstrap 4 彈出框
Bootstrap 4 彈出框
Popover 元件類似於工具提示；它是一個在使用者點選元素時出現的彈出框。不同之處在於，Popover可以包含更多內容。
切換彈出框如何建立 Popover
要建立彈出框，請向元素新增 data-toggle="popover" 屬性。
使用 title 屬性指定彈出框的標題文字，並使用 data-content 屬性指定應顯示在彈出框主體內的文字
<a href="#" data-toggle="popover" title="彈出框標題" data-content="彈出框中的一些內容">切換彈出框</a>
注意：彈出框必須使用 jQuery 初始化：選擇指定的元素並呼叫 popover() 方法。
以下程式碼將啟用文件中的所有 Popover
示例
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
自己動手試一試 »
定位 Popover
預設情況下，Popover 將顯示在元素的右側。
使用 data-placement 屬性設定彈出框在元素的頂部、底部、左側或右側的位置
示例
<a href="#" title="標題" data-toggle="popover" data-placement="top" data-content="內容">點選</a>
<a href="#" title="標題" data-toggle="popover" data-placement="bottom" data-content="內容">點選</a>
<a href="#" title="標題" data-toggle="popover" data-placement="left" data-content="內容">點選</a>
<a href="#" title="標題" data-toggle="popover" data-placement="right" data-content="內容">點選</a>
自己動手試一試 »
注意：如果空間不足，placement 屬性不會按您預期的方式工作。例如：如果您在頁面頂部使用頂部 placement（沒有空間），它會改為將彈出框顯示在元素下方或右側（無論哪裡有空間）。
關閉 Popover
預設情況下，當您再次點選元素時，彈出框會關閉。但是，您可以使用 data-trigger="focus" 屬性，該屬性會在點選元素外部時關閉彈出框
示例
<a href="#" title="可關閉的彈出框" data-toggle="popover" data-trigger="focus" data-content="點選文件中的任何位置關閉此彈出框">點選我</a>
自己動手試一試 »
提示：如果您希望當滑鼠指標移到元素上方時顯示彈出框，請使用 data-trigger 屬性，其值為 "hover"
示例
<a href="#" title="標題" data-toggle="popover" data-trigger="hover" data-content="一些內容">將滑鼠懸停在我身上</a>
自己動手試一試 »
完整的 Bootstrap 彈出框參考
有關所有彈出框選項、方法和事件的完整參考，請訪問我們的 Bootstrap JS 彈出框參考。
