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

Question

当指针悬停在页面右侧时，如何使工具提示自动放置在指针左侧？

这是我的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;
}  
};

当指针悬停在页面的右侧时，我想使工具提示放置在指针的左侧。 这个怎么做？

JSFIDDLE： https ：//jsfiddle.net/t5atf4z1/

Answer 1

您应该检查工具提示右侧位置没有文档。

像这样

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

工作提琴

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

检查鼠标和浏览器右边缘之间的长度。如果长度小于ToolTip的宽度，请使用条件语句更改x值。

由于您具有特定宽度的ToolBox，因此我将其硬编码为js文件。

我不确定这是否是最好的方法，但是它能起作用

Answer 4

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

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