根据左右元素显示左右悬停卡？

Question

My HTML has a div and when I hover the div a card will be displayed on the right side. When the div is in left side then this still show right side. When I reduce the browser width then this card partially show the detail.

How to automatically position using jquery.

var thisEl = $(this); 
var offsets = thisEl.offset();
var thisElTopOffset = offsets.top;
var thisElLeftOffset = offsets.left;

This will show as i mentioned in the image. But i try to position the div to left when the elements are in right.

Code: I tried so far

allHoverCardTriggers.on({
                click: function(event) {
                event.preventDefault();                 
                    var thisEl = $(this);
                    cardTimer = setTimeout(function(){
                        var docWidth = $(document).width();
                        var rightSide = false;

                        //return user id
                        var userLink = thisEl.attr('href');
                        if($('.ViewProfilePage').length && $('img.lia-user-avatar-profile',thisEl).length){
                            var userLink = document.location.href;
                        } else if(thisEl.attr('href')=='#'){
                            return false;
                        }

                        var thisLen = (userLink).split('/');
                        thisUserID = (thisLen)[thisLen.length-1];
                        var thisCard = $('.profileCard[data-user='+thisUserID+']',cardWrapper);

                        var offsets = thisEl.offset();
                        var thisElTopOffset = offsets.top;
                        var thisElLeftOffset = offsets.left;

                            if(thisCard.length && $('.profileCard[data-user='+thisUserID+'] .preloader',cardWrapper).length<1)
                            {
                                $('.profileCard',cardWrapper).hide();
                                rightSide?thisCard.addClass('rightArrow'):thisCard.removeClass('rightArrow');
                                thisCard.delay(500).css({'top':thisElTopOffset,'left':thisElLeftOffset}).stop().show();
                            } 
                            else 
                            {
                                var ajaxReturn = '';

                                thisCard.remove();

                                //profile card wrapper markup
                                var rightArrowClass = rightSide?'rightArrow':'';
                                var profileCardHtml = '<div class="profileCard '+rightArrowClass+'" style="display:block;top:'+thisElTopOffset+'px;left:'+thisElLeftOffset+'px;" data-user="'+thisUserID+'"><div class="inner"><img src="/html/assets/feedback_loading_trans.gif" class="preloader" style="margin:80px auto;display:block;" /></div></div>';

                                $.when(
                                    //get the background
                                    $.ajax({
                                        type: 'GET',
                                        url: userApiUrl+thisUserID,
                                        dataType: 'html',
                                        success: function(data) {
                                            $('.profileCard',cardWrapper).hide();
                                            ajaxReturn = data;
                                        }
                                    })
                                    )
                                    .done(function(){
                                        cardWrapper.append(profileCardHtml);
                                        $('.profileCard[data-user='+thisUserID+']',cardWrapper).eq(0).empty().html(ajaxReturn);
                                        if($('.profileCard[data-user='+thisUserID+'] .preloader',cardWrapper).length){
                                            $('.profileCard[data-user='+thisUserID+'] .preloader',cardWrapper).parents('div.profileCard').remove();
                                        }
                                    })
                                    .fail(function(){
                                        // Hide if failed request
                                        $('.profileCard',cardWrapper).hide();
                                    });
                            }
                        }
                    },400);
                },
                mouseleave: function() {
                    clearTimeout(cardTimer);
                    if($('.profileCard[data-user='+thisUserID+']',cardWrapper).length){
                        $('.profileCard[data-user='+thisUserID+']',cardWrapper).delay(500).fadeOut('fast');
                    }
                }
            });
        }

Answer 1

Here is a jQuery solution. Prior to displaying the popup, the script checks if the offset position of the trigger div plus the popup width falls beyond the screen width and adjusts the popup position accordingly.

 hover = function(e) { //var position = e.position(); var popup = $('.popup'); popup.attr('style', ''); if (e.offsetLeft + popup.outerWidth() > $( window ).width()) { // adjust for screen width popup.css({ right: $( window ).width() - e.offsetLeft - e.offsetWidth + 'px', top: e.offsetTop - popup.outerHeight() }); } else { // position normally popup.css({ left: e.offsetLeft, top: e.offsetTop - popup.outerHeight() }); } popup.show(); } hide = function() { $('.popup').hide(); }

 .left-hover { position:absolute; left:20px; top:80px; border:1px solid black; } .right-hover { position:absolute; right:20px; top:80px; border:1px solid black; } .popup { position:absolute; display:none; border:1px solid red; width:100px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left-hover" onmouseover="hover(this)" onmouseout="hide()">Hover me</div> <div class="right-hover" onmouseover="hover(this)" onmouseout="hide()">Hover me</div> <div class="popup">My popup</div>