Question

I created a simple tooltip for some buttons in an admin panel I am developing. I am using some pretty standard JQuery code to position the tooltip just above the button when the user hovers. However, there appears to be some positioning issues with and without the scrollbar present.

With the scrollbar present, the tooltip appears in the correct place…

When there is not enough content for the scroll bar to appear, the tooltop appears to be off by the width of the scrollbar…

It seems strange since I am using offset().left – which shouldn’t be effected by the width of the page. Here is the code I am using…

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

Any help would be greatly appreciated.

Answer 1

Ok, so I ended up making this work. I was originally appending the tooltip to the body tag. When I added a wrapper div and appended to that, the tooltips align correctly with or without the scrollbar present. Not sure why appending to the body was causing shifts, but at least I got it working.

UPDATE:

Shortly after posting this, I found the true culprit. I has 100% height on the wrapper DIV (and some other elements: HTML, FORM). After removing that, all was fixed. I know better than to throw heights around like that, but I was going for an effect. Oh well.