智能移动的悬浮框

场景：网页内容很多，但是要给需要注解的词汇进行鼠标悬浮操作，但是注解内容的实际大小确定。

例如：我就是爱前端    

 <div class="main-container">
      <div class="abs-domain">
          蜗牛一步步向<span class="need_explain">前端</span>
          <div class="explain-content">
            这里就随便写写吧，自己的事情完成了吗;
          </div>
      </div>
    </div>
    <script type="text/javascript">
        $(function(){
            var need_explain=$('.need-explain');
            $('.need-explain').hover(function(){
                
            })
        })
    </script>

      <div class="abs-domain">
          蜗牛一步步向<span class="need_explain">前端</span>
          <div class="explain-content">
            这里就随便写写吧，自己的事情完成了吗;
          </div>
      </div>
    </div>
    <script type="text/javascript">
       var bluemouthleft,bluemouthtop,window_heigt,window_wid;
    var scrolllTop=0;
    $(window).scroll(function(){
        scrolllTop=$(window).scrollTop();
    })
    $('.customername i').hover(function(){
        var customernameshow=$(this).parents('.customername').find('.customernameshow');
        var customernameshow_heit=customernameshow.outerHeight();
        window_heit=$(window).height();
        window_wid=$(window).width();
        bluemouthleft = $(this).position().left + 25;//相对父级元素的位置 左边距
        bluemouthtop = $(this).position().top;相对父级元素的位置 上边距1
        bluemouthtop1 = $(this).offset().top;
        bluemouthleft1 = $(this).offset().left;
        var x1=window_wid-bluemouthleft1;
        var y1=bluemouthtop1-scrolllTop;//滚动条的滚动位置
        if(x1<220){
             customernameshow.show().css({ 'left':(bluemouthleft-230)+'px'});
        }else{
             customernameshow.show().css({ 'left': bluemouthleft + 'px' });
        }
       if ($('body>div').height()<window_heit) {
            $('body>div').height('100%');
       }//当实际内容高度小于屏幕高度，要将其设置成height100%；，这样浮层才可以看见
        if(window_heit-y1<customernameshow_heit){
            var y2=customernameshow_heit-window_heit+y1;
            customernameshow.css({ 'top':'-'+y2+'px' });
        }
    }, function() {
         var customernameshow=$(this).parents('.customername').find('.customernameshow');
         customernameshow.hide();
         
    })
   
    </script>