CODEWITHSUNDEEP
javascripthtmlcss
MGB C
MGB C

Reputation: 452

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

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..

Upvotes: 1

Views: 388

Answers (1)

Alexis
Alexis

Reputation: 5831

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

Upvotes: 2

Related Questions