realign tooltip-span to the left when it hover to the right side of the page

Question

I want to place the #tooltip-span to the left side of the pointer when the pointer hover to the right then place the #tooltip-span again automatically to the right of the pointer ... here is my simple code...

 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> 

thanks..

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> 

Try this (using jquery)

replace

$(window).width()

By

window.innerWidth

If you want only use 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';
};