automatically realign the tooltip when the pointer is on the right side of the page

Question

how to make the tooltip automatically place to the left side of the pointer when the pointer hovering the right side of the page?

here is my html

<div class="container">
<div class="img">
<a href="html/takraw.html" class="tooltip">
<img class="img" src="images/sepak-takraw.jpg" alt="img">
<span>
  <div class="tooltipbox">
    <h2>Sepak Takraw</h2>
  </div>
 </span>
 </a>
 <div class="desc">Sepak Takraw</div>
 </div>
 <div class="img">
  <a href="#" class="tooltip">
  <img src="images/archery.jpg" alt="img"/>
   <span>
   <div class="tooltipbox">
    <h2>Archery</h2>
  </div>
   </span>
  </a> 
  <div class="desc">Archery</div>
  </div>
  </div>

style.css

div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 240px;
} 
div.img img {
width: 240px;
height:200px;
}
.container {
background:white; padding: 20px; 
position: relative;
margin: auto;
border-radius: 5px;
}
.tooltipbox {
width: 400px;
min-height: 400px;
background: white;
opacity: .95;
padding: 20px;
}
.tooltip {
text-decoration:none;
position:relative;      
}
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
z-index: 9999;
}

script.js

var tooltips = document.querySelectorAll('.tooltip span');

window.onmousemove = function (e) {
var x = (e.clientX + 20) + 'px',
    y = (e.clientY + 20) + 'px';


for (var i = 0; i < tooltips.length; i++) {
    tooltips[i].style.top = y;
    tooltips[i].style.left = x;
}  
};

I want to make my tooltip to place to the left side of the the pointer when the pointer hover the right side of the page. how to do this?

JSFIDDLE : https://jsfiddle.net/t5atf4z1/

Answer 1

You should check tooltips right side position is out of document.

like this

tooltips[i].style.left = ((e.clientX + 20) + tooltips[i].clientWidth < document.body.clientWidth)?x:(e.clientX + 20)-tooltips[i].clientWidth+'px';

Working fiddle

Answer 2

 var tooltips = document.querySelectorAll('.tooltip span'); window.onmousemove = function (e) { var x = (e.clientX - 450) + 'px', y = (e.clientY - 450) + 'px'; for (var i = 0; i < tooltips.length; i++) { tooltips[i].style.top = y; tooltips[i].style.left = x; } }; 

 div.img { margin: 5px; border: 1px solid #ccc; float: left; width: 240px; } div.img img { width: 240px; height:200px; } .container { background:white; padding: 20px; position: relative; margin: auto; border-radius: 5px; } .tooltipbox { width: 400px; min-height: 400px; background: white; opacity: .95; padding: 20px; } .tooltip { text-decoration:none; position:relative; } .tooltip span { display:none; } .tooltip:hover span { display:block; position:fixed; overflow:hidden; z-index: 9999; } 

 <div class="container"> <div class="img"> <a href="html/takraw.html" class="tooltip"> <img class="img" src="images/sepak-takraw.jpg" alt="img"> <span> <div class="tooltipbox"> <h2>Sepak Takraw</h2> </div> </span> </a> <div class="desc">Sepak Takraw</div> </div> <div class="img"> <a href="#" class="tooltip"> <img src="images/archery.jpg" alt="img"/> <span> <div class="tooltipbox"> <h2>Archery</h2> </div> </span> </a> <div class="desc">Archery</div> </div> </div> 

Answer 3

var tooltips = document.querySelectorAll('.tooltip span');

window.onmousemove = function (e) {
    var y = (e.clientY + 20) + 'px',
        width = document.body.clientWidth,
        toolTipWidth = 400;
    if (width - e.clientX > toolTipWidth) {
        x = (e.clientX + 20) + 'px';
    } else {
        x = (e.clientX - 40 - toolTipWidth) + 'px';
    }

    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};

Check the length between your mouse and the right edge of the browser.If the length is less than the ToolTip 's width, change your x value with conditional statement.

Since you have a specific width of the ToolBox ,I hard coded it into js file.

I'm not sure it is the best, but it works

Answer 4

我认为这可以解决您的问题：[工作代码] [1]

  [1]: https://jsfiddle.net/d0kwo0d0/1/