$("[data-toggle='popover']").popover({ //自定义初始化popover html: true, animation:true, placement: "auto", trigger:'manual', content:'<div class="popo-content">' +'<div class="user-info-num">'+'</div>' + '<div class="user-info-img">'+'<span>' + '</span>'+'</div>'+ '</div>', }).on("mouseenter", function () {//当鼠标悬停在触发元素上时, var _this = this, _id = $(this).attr('id'); t=setTimeout(function () { //用了一个计时器,并赋值给t 作用当 鼠标悬停的时间不足够时,在鼠标移开后清除计时 $(_this).popover("show"); //显示弹出框 $(_this).on("shown.bs.popover",function(){ //弹出框显示以后 var result; console.log($(_this).attr('class')); if ($(_this).attr('class')=='user-box'){ //根据自己需求改装弹出框的样式 $('.arrow').css('left','75%'); $('.popover').css({'position':'relative','left':'-250px','top':'-10px','width':'450px'}); } else if ($(_this).attr('class')=='author-info'){ $('.arrow').css('left','35%'); $('.popover').css({'position':'absolute','left':'100px'}); } $.ajax({ //可通过 ajax来获取数据 type:'get', url:"forum/get_user/", data:{ 'id':_id }, // async:false, success : function(data){ $(".popover-content .user-info-num").append( '<img style="height:30px;width:30px;" src='+data.avatar+ '>'+'<span>'+'关注'+data.following_num+'</span>'+'<span>' + '文章' +data.article_num+'</span>'+'<span>'+'喜欢'+data.favorite_num+'</span>'); if(data.img){ for(var i =0; i < data.img.length;i++){ $(".popover-content .user-info-img").append('<div style="float:left">'+'<img '+'src='+data.img[i]+ '>'+'<div>')} } }, }); }())},700); }).on("mouseleave", function () { //鼠标移开 var _this = this; console.log(_this); clearTimeout(t); //清除倒计时 s=setTimeout(function () { console.log($(".popover:hover").length); if (!$(".popover:hover").length) { $(_this).popover("hide"); }}, 100); //用定时器延迟执行,可以移动到弹出框 }); $(document).on("mouseleave",'.popover', function () { // 使用 on来绑定未来事件。 console.log($(this)) setTimeout(function () { $("[data-toggle='popover']").popover('hide');},100); });
bootstrap popover稍微修改
最新推荐文章于 2022-02-07 09:23:51 发布