当它悬停在页面的右侧时，将左侧的工具提示跨度重新调整

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';
};