Bootstrap 弹框插件Popover

弹出框插件：Popover

    第一步：引入bootstrap和jquery  的 cdn . 注意， 由于bootstrap的js文件是基于jQuery实现的，所以，引入cdn要注意顺序，在引bootsrap的js库之前引入jQuery库。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">    //引入bootstrap的css样式

<script src="https://cdn.bootcss.com/jquery/2.0.2/jquery.js"></script>       //引入jQuery库

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    //引入bootstrap的js 

 

 用于，点击，悬浮等事件 弹框。

 1.  选项

 2.  方法

 3.  事件（钩子）

 例：   shown.bs.popover: 当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）

   $('#mypopover').on('shown.bs.popover', function () {// 执行一些动作 })

 

   现在说说的要实现的功能和遇到的问题。

      1，鼠标悬浮弹框：   这个官网上面有：trigger:'hover',　

                 

      2，弹框的内容是个表格： html: true, 设置 html 为true 时， 在 content 里面 就可以 识别 html 代码了

      3，在做的时候发现弹框的宽度过短，但是在行内设置style,设宽的时候没有任何效果。

            这个比较坑，各种谷歌百度后，大部分说的解决方案都是改源码，因为源码限制了最大宽度276px,，注意，是最大宽度，所以我在前台页面style 里面加width 没效果。

源码如下：

.popover {

  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  padding: 1px;

 但是，我们一般项目中引的都是 cdn , so ,,,  　　现在知道源码写的是最大宽度，我们只需要在前台把这个给覆盖的，行内样式的优先级大于外部样式。

    贴代码：

　　html:         

         <button type="button" id='onediv' class="btn btn-warning" data-container="body" data-toggle="popover" data-placement="right"  >  右侧的 Popover  </button>        

          <div id='div'>
                   <table border="" class="table table-bordered" style="width:500px;">                     

                           <tr> <td>11</td><td>22</td></tr>
                          <tr><td>11</td><td></td></tr>
                  </table>
           </div>

     js: 

        $("#onediv").popover(
        {
            trigger:'hover',
            template: '<div class="popover" style="height:100px; max-width:700px"><div class="arrow" style="background:yellow;"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p>                 </div></div></div>',                     //我这里设置了弹框的高度，以及最大宽度
           html: true,                                //设置为true 后，content 
          title:'33333333333',                        //弹框标题
          content: $("#div").html()                //弹框内容
        }
     );