Mouse-Following Tooltip gets Farther Away the Smaller the Window

Question

I've just revamped my tooltip code due to issues with the position altering depending on the size of it's parent (mostly due to using offsetX/Y instead of pageX/Y, but page was being weird, too). So I decided to just have one tooltip for each of my site's pages, parented to the main div, and just feed it different text depending on what the mouse is hovering over (I'll be dealing with the visibility part later).

And it's worked quite well so far, but the only issue is that, the smaller I make my window, the farther the tooltip is from my mouse, until it's not even in view anymore.

Here's the JavaScript coding I've done for it.

      var body = document.getElementsByClassName("test");
      
      var tooltip = document.getElementById("tooltip");
      
      body[0].addEventListener("mousemove", tooltipMove)
      
      function tooltipMove(event) {
        
        var x = event.pageX;
        var y = event.pageY;
        
        tooltip.style.top = (y + -900) + "px";
        tooltip.style.left = (x + -875) + "px";
        
      }

The CSS coding for the tooltip:

.tooltip {
    visibility: hidden;
    width: 170px;
    background-color: white;
    background-image: url("images/tooltipbackground.png");
    color: black;
    text-align: center;
    border-style: groove;
    border-color: #f4bb4c #ffd966 #ffd966 #f4bb4c;
    border-radius: 2px;
    padding: 5px 5px;
  
    position: absolute;
    z-index: 1;
 }

.notfound:hover .tooltip {
    visibility: visible;
  }

And the HTML:

    <div class="test" style="top: 70px; position: relative; height: 100%; width: 100%;">
      <h1>TEST</h1>
      <img src="images/pagenotfound.png">
    </div>
    
    <div style="width: 1px; height: 1px; position: relative;">
      <span class="tooltip" id="tooltip">testing</span>
    </div>

I should mention the body's (which has the "notfound" class) height is 900px, and it's width 600px, in case that's one of the problems.

The 1 pixel div is just what I'm using to "host" the tooltip, not sure if it's causing any problems as well. I inspected the page in order to see it, and it never seemed to slide around with the window size.

Any sort of help would be greatly appreciated. I've tried to switch it from pageX/Y to clientX/Y, but it's the same issue. And using offset causes it's position to shift depending on what I'm hovering over, which is the reason I'm revamping the code in the first place.

I've also tried to change the tooltip's position from absolute to, well, anything else (after resizing it's parent so it doesn't get squashed), but that hasn't helped.

Another thing I should mention is that, for some reason, the shifting doesn't seem to happen in the Y axis, it's only when I squish the window horizontally that the tooltip shifts, at least from what I've noticed.

Answer 1

I had thought changing the tooltip's position to fixed had made it disappear, but I just couldn't see it due to the massive repositioning I had done to it. Once I deleted that it was visible and fine, and better yet, it stays in it's proper position no matter the screen size!

Also note: I had to change pageX/Y to clientX/Y, as using page made the tooltip shift vertically when squished.

    <div style="height: 1px; width: 1px; position: relative;">
      <span class="tooltip" id="tooltip" style="position: fixed;">Placeholder</span>
    </div>

      for (i = 0; i < tip.length; i++) {
        tip[i].addEventListener("mousemove", tooltipMove)
        tip[i].addEventListener("mouseleave", defaultVis)
      }
      
      function tooltipMove(event) {
        
        var x = event.clientX;
        var y = event.clientY;
        
        tooltip.style.visibility = "visible";
        tooltip.style.top = (y + -50) + "px";
        tooltip.style.left = (x + -200) + "px";
        
      }
      
      function defaultVis() {
          tooltip.style.visibility = "hidden";
        }