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

Question

我的 HTML 有一个 div，当我将鼠标悬停在 div 上时，右侧会显示一张卡片。当 div 在左侧时，这仍然显示右侧。当我减小浏览器宽度时，这张卡片会部分显示细节。

如何使用jquery自动定位。

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

这将如我在图片中提到的那样显示。但是当元素在右边时，我尝试将 div 定位到左边。

代码:到目前为止我试过了

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

这是一个 jQuery 解决方案。在显示弹出窗口之前，脚本会检查触发器 div 加上弹出窗口 width 的偏移位置是否超出屏幕 width 并调整相应的弹出位置。

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>