該Popover插件
該Popover插件是類似工具提示; 這是當用戶點擊一個元素上會出現一個彈出框。 所不同的是,該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文件中:
定位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參考 。