<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 

Bootstrap 弹出框插件：Popover

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

 1.  选项

 2.  方法

 3.  事件（钩子）

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

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

<div id="pop_content" class="popover fade right"> <h2 class="popover-title">自定义HTML</h2></div>
<script>    
$(".pop").each(function() {
  var $pElem = $(this);
  $pElem.popover({
    html: true,
    trigger: "manual",
    title: getPopoverTitle($pElem.attr("id")),
    content: getPopoverContent($pElem.attr("id")),
    container: ‘body‘,
    animation: false
  });
}).on("mouseenter",

function() {
  var _this = this;
  $(this).popover("show");
  console.log("mouse entered");
  $(".popover").on("mouseleave",
  function() {
    $(_this).popover(‘hide‘);
  });
}).on("mouseleave",

function() {
  var _this = this;
  setTimeout(function() {
    if (!$(".popover:hover").length) {
      $(_this).popover("hide");
    }
  },
  100);
});
function getPopoverTitle(target) {
  return $("#" + target + "_content > h2.popover-title").html();
};
function getPopoverContent(target) {
  return $("#" + target + "_content > div.popover-content").html();
};
</script>

$(document).ready(function() {
    $(‘#custom‘).popover(
        {
            trigger:‘click‘, //触发方式
            template: ‘你自定义的模板‘, 
            html: true, // 为true的话，data-content里就能放html代码了
            // 还有很多选项 ……
        }
    );
}

Bootstrap的插件