getBoundingClientRect() is returning 0's, what am i doing wrong?

Question

I'm trying to make an element move to another element () by first getting the position with getBoundingClientRect() and then to use those values to set the element position on mouseover. But when I check the logs it's just spitting 0's. What am I doing wrong / overlooking?

var clickers = document.querySelectorAll('.clicker');
var imgPreviewEle = document.getElementById('artistPreview');

clickers.forEach(function(clicker) {
    clicker.addEventListener('mouseover', function hover() {
        var elem = clicker.getBoundingClientRect();
        console.log(elem);
        imgPreviewEle.style.display = "block";
        imgPreviewEle.style.left = elem.left + 300 + 'px';
        imgPreviewEle.style.top = elem.top - 300 + 'px';
    });
});

clickers.forEach(function(clicker) {
    clicker.addEventListener('mouseleave', function hover() {
        var elem = clicker.getBoundingClientRect();
        console.log(elem);
        imgPreviewEle.style.display = "none";
    });
});

.clicker {
    width: 100%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid rgba(18.4, 31, 31, .5);
}
#artistPreview {
    z-index: 1010; 
    position: fixed; 
    clip: rect(290px, 600px, 620px, 0px);
}

user_1150695 · Answer

I made some changes and left some comments. Let me know if you need more info:

var clickers = document.querySelectorAll('.clicker');
var imgPreviewEle = document.getElementById('artistPreview');

// Hide the image from the start
imgPreviewEle.style.display = "none";

clickers.forEach(function(clicker) {
  clicker.addEventListener('mouseover', function hover() {
    var elem = clicker.getBoundingClientRect();
    imgPreviewEle.style.display = "block";
    
    // Make sure the image appears nearby
    // Looks like the -300px you had here pushed the image off screen.
    imgPreviewEle.style.left = (elem.left + elem.width) + 'px';
    imgPreviewEle.style.top = (elem.top + elem.height) + 'px';
    
    console.log(elem);

});
});

clickers.forEach(function(clicker) {
  clicker.addEventListener('mouseleave', function hover() {
    var elem = clicker.getBoundingClientRect();
    console.log(elem);
    imgPreviewEle.style.display = "none";
  });
});

.clicker {
  width: 100%;
  border-top: 2px solid transparent;
  border-bottom: 2px solid rgba(18.4, 31, 31, .5);
}

#artistPreview {
  z-index: 1010;
  position: fixed;
  /* The image should not cover the mouseover field. */
  pointer-events: none;
}

getBoundingClientRect() is returning 0's, what am i doing wrong?

1 Answers