jQuery offset is not calculating correctly on some pages

Question

I am using jQuery offset().top to calculate a hyperlink's pixels from the top of the document window so that when hovered, a tooltip can appear above it.

By default, the tooltip's css has an absolute position of top 0 and left 0. When the link is hovered, it calculates it's position from the top of the document and uses that as the css top position for the tooltip.

The problem is that on some pages, offset is calculating the link's position perfectly, and on others, it is around 50 pixels too many. I can't figure out why.

$(".tiptrigger").mouseenter(function() { 
    var s_id = $(this).attr('id');
    var calc = $(this).offset().top; 
    $("#tip-"+s_id).css({"margin-top": calc+"px"});
});

We would need to see your HTML where the calculation is incorrect to be able to solve this. — Rory McCrossan, Nov 06 '13 at 12:36
did you try `.position()` (relative to a parent, not the window) — mikakun, Nov 06 '13 at 12:36
Can you please show us examples - one that works, and another that doesn't? Thanks — StackExchange What The Heck, Nov 06 '13 at 12:36

ediblecode · Answer 1 · 2013-11-06T13:03:38.040

0

.offset() has this limitation:

Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.

So your jQuery is probably correct but if you have some padding/margin on your body, you will experience an incorrect offset. Either remove it or include it in your calculation:

var bodyOffset = $('body').css("margin-top") + $('body').css('padding-top') + $('body').css('border-top');
var calc = $(this).offset().top + bodyOffset;

edited Nov 06 '13 at 13:03

answered Nov 06 '13 at 12:37

ediblecode

11,701
19
68
116

I thought of that but I checked and the body has no top or bottom margins or padding... – MultiDev Nov 06 '13 at 12:47
@JohnRobinson Border? – ediblecode Nov 06 '13 at 12:51

score 0 · Accepted Answer · answered Nov 06 '13 at 12:38

Instead of absolute try to use fixed for your popup element. Than offset().top should work if you don't have any unnecessary padding applied to body

If still inaccurate instead of .offset().top give a chance to https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

jQuery offset is not calculating correctly on some pages

2 Answers2

Linked