当指针位于页面右侧时，将自动重新对齐工具提示

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/