BootStrap利用popover实现鼠标经过显示并保持显示框
在商城里，导航栏的购物车展示经常需要鼠标经过时，显示已经放入购物车的商品，bootstrap是没有直接用的插件的，这个时候就可以使用popover这个插件改造后实现，具体如下：
html实现：
1
2 购物车
3
javascript实现:
01 $(function(){
02 $("[rel=drevil]").popover({
03 trigger:'manual',
04 placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
05 title : '
Muah ha ha
', //this is the top title bar of the popover. add some basic css
06 html: 'true', //needed to show html of course
07 content : '
', //this is the content of the html box. add the image here or anything you want really.
08 animation: false
09 }).on("mouseenter", function () {
10 var _this = this;
11 $(this).popover("show");
12 $(this).siblings(".popover").on("mouseleave", function () {
13 $(_this).popover('hide');
14 });
15 }).on("mouseleave", function () {
16 var _this = this;
17 setTimeout(function () {
18 if (!$(".popover:hover").length) {
19 $(_this).popover("hide")
20 }
21 }, 100);
22 });
23 });
这样就能实现了：
