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

Posted 2023-04-16

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

$('#email').popover('hide');

不能实现啊

参考技术A 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 );

这样就能实现了：本回答被提问者和网友采纳

如何修改bootstrap的popover支持鼠标移到弹出层上弹窗层不隐藏

1 设置延时， 超过该延时未移入弹窗则弹窗隐藏

Tooltip.prototype.init = function{中的

var triggers = this.options.trigger.split(‘ ‘)后面加上

 

//设置延时
if (this.options.trigger.indexOf(‘hover‘) > -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
}

　　

 

2 控制不消失代码

在Tooltip.prototype.enter = function (obj) {中的

clearTimeout(self.timeout)后加入

if (self.options.trigger.indexOf(‘hover‘) > -1) {
        self.$tip.unbind(‘mouseenter‘).bind(‘mouseenter‘, function (e) {
            self.$tip.data(‘data-element‘, self.$element);//触发popover框的点击事件时可以获取id
            clearTimeout(self.timeout);
            self.hoverState = ‘in‘;
        }).unbind(‘mouseleave‘).bind(‘mouseleave‘, function (e) {
            self.hoverState = ‘out‘;
            self.timeout = setTimeout(function () {
                if (self.hoverState == ‘out‘) self.hide()
            }, self.options.delay.hide)
        })
    }

　　bootstrap版本：v3.3.6