bootstrap的popover()的使用

有一些選項是通過 Bootstrap 數據 API（Bootstrap Data API）添加或通過 JavaScript 調用的。下表列出了這些選項：

選項名稱	類型/默認值	Data 屬性名稱	描述
animation	boolean 默認值：true	data-animation	向彈出框應用 CSS 褪色過渡效果。
html	boolean 默認值：false	data-html	向彈出框插入 HTML。如果為 false，jQuery 的 text 方法將被用於向 dom 插入內容。如果您擔心 XSS 攻擊，請使用 text。
placement	string|function 默認值：top	data-placement	規定如何定位彈出框（即 top|bottom|left|right|auto）。 當指定為 auto 時，會動態調整彈出框。例如，如果 placement 是 "auto left"，彈出框將會盡可能顯示在左邊，在情況不允許的情況下它才會顯示在右邊。
selector	string 默認值：false	data-selector	如果提供了一個選擇器，彈出框對象將被委派到指定的目標。
title	string | function 默認值：''	data-title	如果未指定 title 屬性，則 title 選項是默認的 title 值。
trigger	string 默認值：'hover focus'	data-trigger	定義如何觸發彈出框： click| hover | focus | manual。您可以傳遞多個觸發器，每個觸發器之間用空格分隔。
delay	number | object 默認值：0	data-delay	延遲顯示和隱藏彈出框的毫秒數 - 對 manual 手動觸發類型不適用。如果提供的是一個數字，那么延遲將會應用於顯示和隱藏。如果提供的是對象，結構如下所示： delay: { show: 500, hide: 100 }
container	string | false 默認值：false	data-container	向指定元素追加彈出框。 實例： container: 'body'

方法

下面是一些彈出框（Popover）插件中有用的方法：

方法	描述	實例
Options: .popover(options)	向元素集合附加彈出框句柄。	$().popover(options)
Toggle: .popover('toggle')	切換顯示/隱藏元素的彈出框。	$('#element').popover('toggle')
Show: .popover('show')	顯示元素的彈出框。	$('#element').popover('show')
Hide: .popover('hide')	隱藏元素的彈出框。	$('#element').popover('hide')
Destroy: .popover('destroy')	隱藏並銷毀元素的彈出框。	$('#element').popover('destroy')

 

事例一、

<div class="container" style="padding: 100px 50px 10px;" >
    <button type="button" class="btn btn-default" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="left"
            data-content="左側的 Popover 中的一些內容">
        左側的 Popover
    </button>
    <button type="button" class="btn btn-primary" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="top"
            data-content="頂部的 Popover 中的一些內容">
        頂部的 Popover
    </button>
    <button type="button" class="btn btn-success" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="bottom"
            data-content="底部的 Popover 中的一些內容">
        底部的 Popover
    </button>
    <button type="button" class="btn btn-warning" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="right"
            data-content="右側的 Popover 中的一些內容">
        右側的 Popover
    </button>
</div>
 
<script>
$(function (){
    $("[data-toggle='popover']").popover();
});
</script>
</div>


事例二、

var maxtip = '最多只能選擇6個項目';
$(dom).popover({
html:true,
content: maxtip,
trigger:"manual",
placement:"top"
});

 

$(dom).popover("show");
setTimeout(function(){
$(dom).popover("hide");
},3000)