bootstrap使用popover插件实现鼠标悬停显示提示框

使用popover组件实现显示图片或者二维码。

1. html实现

   <a href="#" rel="drevil">
       <span class="glyphicon glyphicon-shopping-cart"> </span> 购物车
   </a>

2. js实现

   $(function(){
       $("[rel=drevil]").popover({
           trigger:'manual',
           placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
           title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover. add some basic css
           html: 'true', //needed to show html of course
           // content : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>', //this is the content of the html box. add the image here or anything you want really.
           content : '<div id="popOverBox"><img src="/static/img/uploads/summer.jpg" width="250" height="250" /></div>', //this is the content of the html box. add the image here or anything you want really.
           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);
       });
   });

---

不积跬步无以至千里，不积小流无以成江河。