首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >我想在使用手动触发选项时在引导程序中延迟弹出显示

我想在使用手动触发选项时在引导程序中延迟弹出显示
EN

Stack Overflow用户
提问于 2014-08-22 18:26:34
回答 1查看 779关注 0票数 1

我使用popover插件显示悬停卡片,我使用ajax从文件中获取用户名数据。我使用的是以下代码:

代码语言:javascript
复制
jQ('.username').popover({ 
            html : true,
            trigger: 'manual',
            placement: function (context, source) {
                var position = jQ(source).position();
                if (position.left > 515) {
                  return "left";
                }
                if (position.left < 515) {
                  return "right";
                }
                if (position.top < 110){
                  return "bottom";
                }
                return "top";
            },
            //delay: {show: 700},
            content: function() {
                // Get link where user hover the username.
                var view_user_link = jQ(this).attr('href').split('/');
                // Get userid.
                var userid = view_user_link[2];
                var login_userid = getCookie('userid');
                if(global_hash.perm_view_profiles || login_userid == userid) {
                    // Sent AJAX request to get user information to show in hovercard.
                    if(!jQ('#content_'+userid).html()) {
                        var obj = this;
                        jQ.ajax({
                            type: 'POST',
                            url: '/register',
                            data: {'action':'show_hovercard', 'userid':userid},
                            success: function (response) {
                                // Show hovercard data into tooltip.
                                jQ('a.username').attr('title','');
                                jQ('#hover_card_content').append(response);
                                return jQ('#content_'+userid).html();
                            }
                        });
                    } else {
                        // If AJAX request already sent from the user on the same page then data get from the page.
                        jQ('a.username').attr('title','');
                        return jQ('#content_'+userid).html();
                    }
                } else {
                    // If user does't permission to view another user profile then show title.
                    jQ('a.username').attr('title','View profile');
                }   
            }

        }).on("mouseenter", function() {
            var _this = this;
            setTimeout(function(){
                jQ(_this).popover("show");
                jQ(".popover").on("mouseleave", function () {
                    jQ('.username').popover('hide');
                });
            }, 400);
        }).on("mouseleave", function() {
            var _this = this;
            setTimeout(function() {
                if (!jQ(".popover:hover").length) {
                    if(!jQ(_this).is(':hover')) {
                        jQ(_this).popover('hide');
                    }
                }
            }, 200);
        });

请帮助我如何延迟弹出显示,因为它是第一次不显示数据悬停的用户名链接,因为我正在使用ajax获取数据

EN

回答 1

Stack Overflow用户

发布于 2017-05-24 17:32:47

在ajax调用外部声明一个变量,在success提要上启用要传递给popover的任何内容,在complete上启用包含内容的popover

代码语言:javascript
复制
     var popOverContent;
     $.getJSON("url?id=" + obj.id + ", function (data) {
            popOverContent = BuildPopOverDataContent(data.Title, data.Description);
        })
        .always(function () {                    
            EnableHelpPopOver(obj.id, popOverContent);      
            $(jqObjId).trigger("mouseover");  //This will trigger the popover to show
        });   

function BuildPopOverDataContent(Title, Description) {
   return "<h2>Some Content</h2>";
}


function EnableHelpPopOver(container, popOverContent) {
    var objId = "#" + container;        
    $(objId).popover({
        html: true,
        trigger: 'hover',
        container: objId,
        placement: 'top',
        delay: {
            show: "500",
            hide: "100"
        },
        content: popOverContent
    });
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25444858

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档