Finding an element's position using javascript

Question

Hi guys i have following code which is i am using to create a simple tooltip.

html

<div class="x">
    <div class="abc">abc</div>
</div>

javascript

//Finding the elements position
var elmPosition = function (elm) {

    var x = 0,
        y = 0;

    while (elm) {
        x += (elm.offsetLeft - elm.scrollLeft + elm.clientLeft);
        y += (elm.offsetTop - elm.scrollTop + elm.clientTop);
        elm = elm.offsetParent;
    }

    return {
        x: x,
        y: y
    };
};

//Creating and adding the tooltip to document
document.querySelector('.abc').addEventListener("mouseover", function () {
    var elm = document.createElement("div");
    var position = elmPosition(document.querySelector('.abc'));
    elm.textContent = 'just a tooltip';
    elm.classList.add('tooltip');
    document.body.appendChild(elm);
    elm.style.position = 'absolute';
    elm.style.top = (position.y - 20) + 'px';

});

//remove tooltip on mouse out
document.querySelector('.abc').addEventListener("mouseout", function () {
    document.body.removeChild(document.body.querySelector('.tooltip'));
})

DEMO

The generated tooltip should always stay top of the mouse hovered element. This code perfectly works until the page is scrolled. When then page is scrolled the position of the tooltip is pushed to very far from the mouse hovered element. Could someone please help me to find out what the issue is. Thanks :)

@naomik I know, that's why I posted it as a comment, however, jQuery's source is always good to learn how thigs should work. — klenium
– klenium, Commented Aug 25, 2015 at 15:42
It might be worth looking in to getBoundingClientRect(). Also simply add pageYOffset to the y, and pageXOffset for the x. — Daniel Apt
– Daniel Apt, Commented Aug 25, 2015 at 16:27

Robin Dorbell · Accepted Answer · 2015-08-25 16:04:05Z

2

What you're checking for using scrollLeft is how far elm is scrolled. What you want is how far the window is scrolled I'm guessing.

Use window.pageYOffset and window.pageXOffset like so:

while (elm) {
    x += (elm.offsetLeft - window.pageXOffset + elm.clientLeft);
    y += (elm.offsetTop - window.pageYOffset + elm.clientTop);
    elm = elm.offsetParent;
}

EDIT

After trying it out it doesn't make much sense involving the scroll if you're not working with position: fixed. I removed it and edited your fiddle: https://jsfiddle.net/mg606dh1/2/

EDIT 2

You can also change the position to position: fixed and use the code the way you meant for it to be used: https://jsfiddle.net/mg606dh1/3/

edited Aug 25, 2015 at 16:04

answered Aug 25, 2015 at 15:34

Robin Dorbell

1,6391 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Finding an element's position using javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related