bootstrap的popover()的使用

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

選項名稱

類型/預設值

Data 屬性名稱

描述

animation

boolean

預設值：true

data-animation

向彈出框應用 CSS 褪色過渡效果。

html

預設值：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

data-selector

如果提供了一個選擇器，彈出框對象将被委派到指定的目标。

title

string | function

預設值：''

data-title

如果未指定 title 屬性，則 title 選項是預設的 title 值。

trigger

預設值：'hover focus'

data-trigger

定義如何觸發彈出框： click| hover | focus | manual。您可以傳遞多個觸發器，每個觸發器之間用空格分隔。

delay

number | object

預設值：0

data-delay

延遲顯示和隐藏彈出框的毫秒數 - 對 manual 手動觸發類型不适用。如果提供的是一個數字，那麼延遲将會應用于顯示和隐藏。如果提供的是對象，結構如下所示：

container

string | false

data-container

向指定元素追加彈出框。

執行個體： container: 'body'

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

方法

執行個體

Options: .popover(options)

向元素集合附加彈出框句柄。

Toggle: .popover('toggle')

切換顯示/隐藏元素的彈出框。

Show: .popover('show')

顯示元素的彈出框。

Hide: .popover('hide')

隐藏元素的彈出框。

Destroy: .popover('destroy')

隐藏并銷毀元素的彈出框。

var maxtip = '最多隻能選擇6個項目';

$(dom).popover({

html:true,

content: maxtip,

trigger:"manual",

placement:"top"

});

$(dom).popover("show");

setTimeout(function(){

$(dom).popover("hide");

},3000)