Question

bootstrap 中的popover放在input上怎么使用

input框输入邮箱，当input失去焦点时验证输入的邮箱格式，入股不正确就显示popover，input获得焦点时不显示popover该怎么实现啊？我在input加了onfouce=vv()
function vv(){

$('#email').popover('hide');
}
不能实现啊

Answer 1

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

在商城里，导航栏的购物车展示经常需要鼠标经过时，显示已经放入购物车的商品，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.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.
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 });

这样就能实现了：