- HEAD 標簽之間引入CSS:<link href="../../../public/css/bootstrap.min.css" rel="stylesheet">
-
BODY標簽最末端引入JS:<script src="../../../public/js/jquery.min.js "></script>
<script src="../../../public/js/bootstrap.min.js "></script>
-
在2的基礎上再插入兩端JS代碼:
<script>
$(function () {
$('[data-toggle="popover"]').popover()
});
</script>
<script>
$(function(){
$('[rel=popover]').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
</script>
-
放置一段DIV,這段DIV的作用是顯示紅色文字:
<div id="popover_content_wrapper" style="display: none">
<div>
<span style="color:red">Hello</span>
</div>
</div>
-
引入將要使用彈出窗口的HTML元素
<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title">
彈出紅色字體
</li>
-
效果如下:

原文章來源 stackoverflow.com
Bootstrap popover 文檔 http://v3.bootcss.com/javascript/#popovers
