1

我为正在开发的管理面板中的一些按钮创建了一个简单的工具提示。当用户悬停时，我正在使用一些非常标准的 JQuery 代码将工具提示定位在按钮上方。但是，无论是否存在滚动条，似乎都存在一些定位问题。

随着滚动条的出现，工具提示出现在正确的位置......

在此处输入图像描述

当滚动条显示的内容不足时，工具顶部似乎偏离了滚动条的宽度......

在此处输入图像描述

这似乎很奇怪，因为我使用的是 offset().left - 它不应该受到页面宽度的影响。这是我正在使用的代码...

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();
});

任何帮助将不胜感激。

4

1 回答 1

2

好的，所以我最终完成了这项工作。我最初将工具提示附加到正文标记。当我添加一个包装器 div 并附加到它时，无论是否存在滚动条，工具提示都会正确对齐。不知道为什么附加到身体会导致变化，但至少我让它工作了。

更新：

发布后不久，我找到了真正的罪魁祸首。我在包装器 DIV（以及其他一些元素：HTML、FORM）上有 100% 的高度。删除之后，一切都修复了。我知道最好不要像那样高高在上，但我想要一个效果。那好吧。

于 2012-06-21T19:06:00.473 回答