Bootstrap利用popover实现鼠标经过显示并保持显示框

在真实场景下，经常需要鼠标经过时展示，显示一些详细说明，但是，bootstrap是没有直接用的插件的，这个时候就可以使用popover这个插件改造后实现，具体如下：

html实现：

<a href="#" rel="drevil">
    移动到我这
</a>

javascript实现:

$(function(){
    $("[rel=drevil]").popover({
        trigger:'manual',
        placement : 'bottom',
        title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;">www.orchome.com</div>',
        html: 'true',
        content : '<div id="popOverBox"><img src="/images/user/noHeadPortraitV2.png" width="251" height="201" /></div>',
        animation: false
    }).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);
      });
});

在线运行