最新的Web開發教程
 

Bootstrap Popover Plugin


Popover插件

Popover插件是類似工具提示; 這是當用戶點擊一個元素上會出現一個彈出框。 所不同的是,該popover可包含更多的內容。

Click To Toggle Popover

提示:插件可以單獨包括(用Bootstrap's個體"popover.js"文件),或一次(使用"bootstrap.js""bootstrap.min.js"


如何創建Popover

要創建一個popover ,將增加data-toggle="popover"屬性的元素。

使用title屬性來指定酥料餅的標題文本,並使用data-content屬性來指定要在裡面顯示的文本popover's身體:

<a href="#" data-toggle="popover" title=" Popover Header" data-content="Some content inside the popover">Toggle popover</a>

注: Popovers必須使用jQuery初始化:選擇指定的元素,並調用popover()方法。

下面的代碼將啟用所有popovers文件中:

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>
試一試»

定位Popovers

默認情況下, 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>
試一試»

提示:您還可以使用數據放置屬性,值為"auto" ,這將讓瀏覽器決定的位置popover 。 例如,如果值是"auto left"時, popover將顯示在左側可能時,否則在右邊。


關閉Popovers

默認情況下, 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參考