Question

这是我用来显示工具提示的jquery：

$(document).ready(function() {
$(".toolTip").hover(
    function() {
    var div_id = $(this).attr('id').split("_")[0];  
    if($("#"+div_id).length){
          //
    } 
    $(this).append(
     '<div class="toolTipWrapper">'
        +$("#"+div_id).text()
      +'</div>'
    );
    this.width = $(this).width();
    //Get the HTML document width and height
    var documentWidth = $(document).width();
    var documentHeight = $(document).height();
    var toolTipWidth = $('.toolTipWrapper').width();
    alert(documentWidth+" "+toolTipWidth+" "+$(this).offset().left);
    if ($(this).offset().left + toolTipWidth  > documentWidth) {
        alert("COMING");
    }
    //ends
    $(this).find('.toolTipWrapper').css({left:this.width+16})
    $('.toolTipWrapper').fadeIn(300);
  },
    function() {
      $('.toolTipWrapper').fadeOut(100);
    }
  );
});

在HTML中我有：

.toolTip {
    padding-right: 20px; 
    background: url(../images/help.png) no-repeat right;
    color: #3366FF;
    position: relative;
 }
 .toolTipWrapper { 
    width: 350px;
    position: absolute;
    top: 10px;
    display: none; 
    color: #4D4D4D;
    font-size: 12px; 
    background-color: #EFF0F0; 
    border-color: #C9C9C9;
    border-width: 1px;
    border-style: solid; 
    padding: 6px 15px; 
 }

现在工具提示应该移动它的位置，以便在窗口较小时它仍然完全可见。我需要将tooptip的位置移动到悬停对象的顶部/左侧。但是当我检查$(this).offset().left + toolTipWidth > documentWidth时，我看不到条件变为真，因为我将这些值视为：

documentWidth 784   toolTipWidth 350    $(this).offset().left 383

这里有什么问题？

Answer 1

如果您正在使用窗口调整大小，最好使window的高度和宽度不是document，

$(window).height();
$(window).width();

我认为这是你的问题！

将位置移动到对象的顶部和左侧

1 个答案: