- 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