滚动条的存在会影响JQuery的偏移量

我为我正在开发的管理面板中的一些按钮创建了一个简单的工具提示。当用户悬停时，我正在使用一些非常标准的JQuery代码将工具提示放置在按钮上方。但是，在滚动条存在和不存在的情况下，似乎存在一些定位问题。滚动条的存在会影响JQuery的偏移量

通过本滚动条，工具提示出现在正确的地方...

enter image description here

当没有足够的内容出现滚动条时，tooltop出现由宽度为关闭。滚动的...

enter image description here

它，因为我使用的偏移似乎很奇怪（）左 - 这不应该由页面的宽度来实现。这里是我使用的代码...

var ttl; 
var tt; 
$('.icon').mouseover(function (e) { 
    ttl = $(this).attr('title'); 
    $(this).attr('title', ''); 

    $('body').append('' + 
     '<div id="tt" class="tt">' + 
     ' <div class="tttxt">' + 
     ' ' + ttl + 
     ' </div>' + 
     ' <div class="ttnib">&nbsp;</div>' + 
     '</div>'); 
    tt = $('#tt'); 

    var y = $(this).offset().top - tt.outerHeight(); 
    var x = $(this).offset().left - (tt.outerWidth() - $(this).outerWidth())/2; 
    tt.css('left', x + 'px').css('top', y + 'px'); 
}); 
$('.icon').mouseout(function() { 
    $(this).attr('title', ttl); 
    tt.remove(); 
});

任何帮助将不胜感激。

来源

2012-05-23 CoderMarkus

好的，所以我最终完成了这项工作。我最初将工具提示附加到body标签。当我添加一个包装div并附加到它时，工具提示可以正确对齐，也可以不带滚动条。不知道为什么追加到身体造成转变，但至少我得到了它的工作。

UPDATE：

发布此之后不久，我发现真正的罪魁祸首。我在包装DIV（和一些其他元素：HTML，FORM）上有100％的高度。删除后，所有都是固定的。我知道比这样的高度更好，但我正在寻求一种效果。好吧。

来源

2012-06-21 19:06:00 CoderMarkus

滚动条的存在会影响JQuery的偏移量

回答

相关问题