*bootstrap官方說明：http://v3.bootcss.com/javascript/#popovers
一. popover常用配置參數：
1 //常用配置參數：
2 $(document).ready(function() {
3 $('#temp').popover(
4 {
5 trigger:'click', //觸發方式
6 template: '', //你自定義的模板
7 title:"標題",//設置 彈出框 的標題
8 html: true, // 為true的話，data-content里就能放html代碼了
9 content:"",//這里可以直接寫字符串，也可以 是一個函數，該函數返回一個字符串；
10 }
11 );
12 }
13 //常用方法：
14 $('#element').popover('show');
15 $('#element').popover('hide');
16 $('#element').popover('destroy')
二. 案例分析：
1. 案例要求：動態產生一個按鈕，並給頁面中所有具有data-toggle="popover"屬性的元素綁定popover(彈出框)效果，觸發方式：當鼠標指針放到元素上時彈出彈出框，離開元素時，彈出框消失；彈出框內容要求：一定要包含該觸發彈窗元素的文本信息；
2. html代碼：（注意引入bootstrap.js和樣式）
1 <body> 2 <a id="temp1" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" title="Dismissible popover" >彈出框1</a> 3 <a id="temp2" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover">彈出框2</a> 4 5 <div id="LinkDIV" style="float:left;width:200px"> 6 </div> 7 </body>
3. js代碼：
<script>
$(function () {
$("#LinkDIV").html('<button type="btn btn-lg btn-primary" data-toggle="popover" id="temp3">彈出框3</button>');
$('[data-toggle="popover"]').each(function () {
var element = $(this);
var id = element.attr('id');
var txt = element.html();
element.popover({
trigger: 'manual',
placement: 'bottom', //top, bottom, left or right
title: txt,
html: 'true',
content: ContentMethod(txt),
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(this).siblings(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});
});
});
function ContentMethod(txt) {
return '<table class="table table-bordered"><tr><td>' + txt + '</td><td>BB</td><td>CC</td><td>DD</td></tr>' +
'<tr><td>' + txt + '</td><td>BB</td><td>CC</td><td>DD</td></tr>' +
'<tr><td>' + txt + '</td><td>BB</td><td>CC</td><td>DD</td></tr>'+
'<tr><td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td><td>BB</td><td>CC</td><td>DD</td></tr></table>';
}
</script>
4. 效果圖：
*tips：
1. 彈出框的最大寬度有默認值：275px；（bootstrap.min.css）
1 .popover {
2 position: absolute;
3 top: 0;
4 left: 0;
5 z-index: 1060;
6 display: none;
7 max-width: 2000px;//我改為了2000px
8 padding: 1px;
9 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
10 font-size: 14px;
11 font-style: normal;
12 font-weight: 400;
13 line-height: 1.42857143;
14 text-align: left;
15 text-align: start;
16 text-decoration: none;
17 text-shadow: none;
18 text-transform: none;
19 letter-spacing: normal;
20 word-break: normal;
21 word-spacing: normal;
22 word-wrap: normal;
23 white-space: normal;
24 background-color: #fff;
25 -webkit-background-clip: padding-box;
26 background-clip: padding-box;
27 border: 1px solid #ccc;
28 border: 1px solid rgba(0,0,0,.2);
29 border-radius: 6px;
30 -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
31 box-shadow: 0 5px 10px rgba(0,0,0,.2);
32 line-break: auto;
33 }