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

bootstrap popover hover

在商城里，导航栏的购物车展示经常需要鼠标经过时，显示已经放入购物车的商品，bootstrap是没有直接用的插件的，这个时候就可以使用popover这个插件改造后实现，具体如下：

html实现：

1	<a href="#" rel="drevil">

2	<span class="glyphicon glyphicon-shopping-cart"> </span> 购物车

3

</a>

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 : '<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

06	html: 'true', //needed to show html of course

07	content : '<div id="popOverBox"><img src="http://www./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.

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

});

这样就能实现了：

来自：http:///questions/15989591/how-can-i-keep-bootstrap-popover-alive-while-the-popover-is-being-hovered