Bootstrap Popover（彈出框）是使用定製的 Jquery 插件創建的。它可以用來顯示任何元素的一些信息。
在本教程中，您將看到如何使用 Bootstrap Popover，以及如何使用一些可用選項進行定製。
什麼是必需的您必須飲用 Jquery、Bootstrap CSS 和兩個 JavaScript files - 一個用於 Bootstrap Tooltip（工具提示插件），一個用於 Bootstrap Popover（彈出框）。
用於 Tooltip（工具提示插件）的 JS 文件位於您的 Bootstrap 文件夾中的 js 文件夾下，名為 bootstrap-tooltip.js。用於 Popover（彈出框）的 JS 文件位於您的 Bootstrap 主文件夾中的 js 文件夾下，名為 bootstrap-popover.js。Jquery 位於您的 Bootstrap 主文件夾中的 docs > assets > js 下，名為 jquery.js。或者您可以直接訪問 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 下載 Jquery。
請確保您在下載 bootstrap-popover.js 之前先下載 bootstrap-tooltip.js。彈出框依賴工具提示插件，因此需要先加載工具提示插件。
在您的網站中使用 Bootstrap Popover（彈出框）實例<div>
<h2>使用Bootstrap創建彈出框</h2>
<div>
<a href="#" id="example" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function ()
{ $("#example").popover();
});
</script>
在線查看實例
下面的表格解釋了上面的代碼。它將幫助您理解如何使用 Bootstrap Popover（彈出框）。
代碼解釋id="example"分配給相關錨的 id，id 的值指向後邊要實現 popover（彈出框）的 JavaScript。class="btn btn-danger"創建一個按鈕。btn btn-danger 是實例中使用的 class。您可以使用 Bootstrap CSS 中任何其他的 class，或者使用您自己定義的 class。data-content="It's so simple to create a tooltip for my website!"data-content 的值顯示在 popover（彈出框）的主體中。data-original-title="Bootstrap Popover"data-original-title 的值顯示為 popover（彈出框）的標題。hover for popover錨文本。<script src="https://ajax.googleapis.com/ajax/libs/ jquery/1.7.1/jquery.min.js"></script>引用 Jquery。<script src="../bootstrap/twitter-bootstrap-v2/ js/bootstrap-tooltip.js"></script>引用 Bootstrap Tooltip（工具提示插件）的 JS 文件。<script src="../bootstrap/twitter-bootstrap-v2/js/ bootstrap-popover.js"></script>引用 Bootstrap Popover（彈出框）的 JS 文件。$(function ()準備文檔。Jquery 命令。$("#example").popover();訪問 id example，並在上面實現 popover()。這裡我們沒有在 box 外創建 popover（彈出框），不通過任何的定製，即沒有通過 popover() 使用任何的選項。
用法所以，我們可以總結出 Bootstrap Popover（彈出框）的用法是：
$(function ()
{ $("identifier").popover(options);
});其中 identifier 是一個 Jquery 選擇器，用於標識相關的容器元素。接下來，我們來看看 options 都有哪些。
選項下面是一些通過 popover() 定製 Popover（彈出框）外觀和感觀時可能使用到的選項。
animationanimation 值的類型是 boolean，默認值是 true。用於給 tooltip（工具提示插件）帶來 css 漸變過渡效果。
placementplacement 值的類型可以是 string 或者 function，默認值是 'right'，top、bottom 和 left 是其他幾個可以使用的值。這個選項用於決定環繞錨文本周圍的 Popover（彈出框）是位置。下面是一個使用 placement 選項的實例。
實例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 彈出框位置選擇的實例</title>
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style>
a {
margin-left : 400px;
}
</style>
</head>
<body>
<div>
<h2>使用Bootstrap plcement 選項創建彈出框</h2>
<div>
<a href="#" id="example" rel="popover" data-content="為我的網站創建一個提示框如此簡單！" data-original-title="Twitter Bootstrap 彈出框">懸停彈出</a>
</div>
<div>
<a href="#" id="example_left" rel="popover" data-content="為我的網站創建一個提示框如此簡單！" data-original-title="Twitter Bootstrap 彈出框">懸停彈出</a>
</div>
<div>
<a href="#" id="example_top" rel="popover" data-content="為我的網站創建一個提示框如此簡單！" data-original-title="Twitter Bootstrap 彈出框">懸停彈出</a>
</div>
<div>
<a href="#" id="example_bottom" rel="popover" data-content="為我的網站創建一個提示框如此簡單！" data-original-title="Twitter Bootstrap 彈出框">懸停彈出</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function ()
{ $("#example").popover();
$("#example_left").popover({placement:'left'});
$("#example_top").popover({placement:'top'});
$("#example_bottom").popover({placement:'bottom'});
});
</script>
</body>
</html>