轉自： http://www.tuicool.com/articles/IzQJziN
----------------------------------
比較簡單的做法是：設置當前元素的style='padding-right:這里設置參數，控制寬度;'
------------------------------------
直接在當前元素上設置是不行的，
需要修改bootstrap.css或者bootstrap.min.css文件。打開這個文件
搜索 .popover，設置其最大寬度（具體的寬度由該popover的內容的寬度決定）：
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 600px; // 原來是276px; 我改成了600px;
padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
line-break: auto
}
=========================
一. popover常用配置參數：
//常用配置參數： 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. 效果圖：
