javascript - 当它悬停在页面右侧时，将工具提示跨度重新对齐到左侧

Question

我想将 #tooltip-span 放在指针的左侧，当指针悬停在右侧时，然后再次自动放置 #tooltip-span 以指针的右边...这是我的简单代码...

var tooltipSpan = document.getElementById('tooltip-span');
    
window.onmousemove = function (e) {
     var x = e.clientX,
        y = e.clientY;
     tooltipSpan.style.top = (y + 20) + 'px';
     tooltipSpan.style.left = (x + 20) + 'px';
};

.tooltip {
   text-decoration:none;
   position:relative;          
}
.tooltip span {
   display:none;
}
.tooltip:hover span {
   display:block;
   position:fixed;
   overflow:hidden;
   z-index: 9999;
}

<a class="tooltip" href="http://www.google.com/">
<h1 style="text-align: center; background: red;">hover me</h1> 
<span id="tooltip-span">
       <div style="width: 400px; height: 400px; background: blue;"> <p     style="text-align:justify; color: white;">content content content content 
         content content content content content content content content content    content content 
     content content content content content content content content content   content content </p></div>
    </span>
</a>

谢谢..

Answer 1

var tooltipSpan = document.getElementById('tooltip-span');
    
window.onmousemove = function (e) {
     var x = e.clientX,
        y = e.clientY;
  if(x>(window.innerWidth/2))
    {
      x-=420;
    }
     tooltipSpan.style.top = (y + 20) + 'px';
     tooltipSpan.style.left = (x + 20) + 'px';
};

.tooltip {
   text-decoration:none;
   position:relative;          
}
.tooltip span {
   display:none;
}
.tooltip:hover span {
   display:block;
   position:fixed;
   overflow:hidden;
   z-index: 9999;
}

<a class="tooltip" href="http://www.google.com/">
<h1 style="text-align: center; background: red;">hover me</h1> 
<span id="tooltip-span">
       <div style="width: 400px; height: 400px; background: blue;"> <p     style="text-align:justify; color: white;">content content content content 
         content content content content content content content content content    content content 
     content content content content content content content content content   content content </p></div>
    </span>
</a>

试试这个(使用 jquery)

替换

$(window).width()

通过

window.innerWidth

如果你只想使用 JS。

window.onmousemove = function (e) {
     var x = e.clientX,
        y = e.clientY;
if(x>$((window).width()/2))
{
      x-=420;
}
     tooltipSpan.style.top = (y + 20) + 'px';
     tooltipSpan.style.left = (x + 20) + 'px';
};