Bootstrap JS 彈出框
JS Popover
Popover 元件類似於工具提示；它是一個在使用者點選元素時出現的彈出框。不同之處在於，Popover可以包含更多內容。
關於 Popover 的教程，請閱讀我們的 Bootstrap Popover 教程。
透過 data-* 屬性啟用
data-toggle="popover" 啟用彈出框。
title 屬性指定彈出框的標題文字。
data-content 屬性指定應在彈出框正文中顯示文字。
透過 JavaScript
Popover 不是純 CSS 外掛，因此必須使用 jQuery 初始化：選擇指定的元素並呼叫 popover() 方法。
示例
// 選擇文件中所有 data-toggle="popover" 的元素
$('[data-toggle="popover"]').popover();
// 選擇指定元素
$('#myPopover').popover();
自己動手試一試 »
Popover 選項
選項可以透過資料屬性或 JavaScript 傳遞。對於資料屬性，將選項名稱附加到 data-，例如 data-placement=""。
| 名稱 | 型別 | 預設值 | 描述 | 試一試 |
|---|---|---|---|---|
| animation | boolean | true |
指定開啟和關閉彈出框時是否新增 CSS 淡入淡出過渡效果
|
試一試 |
| container | 字串，或布林值 false | false | 將彈出框附加到特定元素。 示例：container: 'body' |
試一試 |
| content | string | "" | 指定彈出框正文中的文字 | 試一試 |
| delay | 數字，或物件 | 0 | 指定開啟和關閉彈出框所需的毫秒數。 要指定開啟延遲和關閉延遲，請使用物件結構 delay: {show: 500, hide: 100} - 開啟彈出框需要 500 毫秒，但關閉只需要 100 毫秒 |
試一試 |
| html | boolean | false | 指定是否在彈出框中接受 HTML 標籤
當設定為 false（預設）時，將使用 jQuery 的 text() 方法。如果您擔心 XSS 攻擊，請使用此選項 |
試一試 |
| placement | string | "right" | 指定彈出框的位置。可能的值
|
試一試 |
| selector | 字串，或布林值 false | false | 將彈出框新增到指定的選擇器 | 試一試 |
| template | string | 建立彈出框時使用的基本 HTML。 彈出框的標題將注入到 .popover-header 中。 彈出框的內容將注入到 .popover-body 中。 .arrow 將成為彈出框的箭頭。 最外層的包裝元素應具有 .popover 類。 |
||
| title | string | "" | 指定彈出框的標題文字 | 試一試 |
| trigger | string | "click" | 指定彈出框的觸發方式。可能的值
|
試一試 |
| offset | 數字或字串 | 0 | 彈出框相對於其目標元素的偏移量 | |
| fallbackPlacement | 字串或陣列 | "flip" | 指定 Popper 將使用的備用位置 | |
| boundary | 字串或元素 | "scrollParent" | 彈出框的溢位約束邊界。接受值 "viewport"、"window" 或 "scrollParent"，或 HTML 元素 |
Popover 方法
下表列出了所有可用的彈出框方法。
| 方法 | 描述 | 試一試 |
|---|---|---|
| .popover(options) | 使用選項啟用彈出框。有關有效值，請參閱上面的選項 | 試一試 |
| .popover("show") | 顯示彈出框 | 試一試 |
| .popover("hide") | 隱藏彈出框 | 試一試 |
| .popover("toggle") | 切換彈出框 | 試一試 |
| .popover("dispose") | 隱藏並銷燬彈出框 | 試一試 |
| .popover("enable") | 使彈出框能夠顯示。這是預設值 | |
| .popover("disable") | 移除顯示彈出框的能力。只有在重新啟用後才能顯示彈出框 | |
| .popover("toggleEnabled") | 切換彈出框的顯示或隱藏能力 | |
| .popover("update") | 更新彈出框的位置 |
Popover 事件
下表列出了所有可用的彈出框事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| show.bs.popover | 當彈出框即將顯示時發生 | 試一試 |
| shown.bs.popover | 當彈出框完全顯示時發生（在 CSS 過渡完成後） | 試一試 |
| hide.bs.popover | 當彈出框即將隱藏時發生 | 試一試 |
| hidden.bs.popover | 當彈出框完全隱藏時發生（在 CSS 過渡完成後） | 試一試 |
| inserted.bs.popover | 在 show.bs.popover 事件之後，當彈出框模板已新增到 DOM 時發生 |
