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

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

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

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

我不确定它是最好的，但它有效

Answer 4

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

OP2or3

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

4 个答案: