Question

我正在尝试实现工具提示，所以我编写了这段代码：

var btns = document.getElementsByClassName('get-info');
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('mouseover', showDetails, false);
    btns[i].addEventListener('mouseout', hiddenDetails, false);
    btns[i].nextElementSibling.addEventListener('mouseover', showParagraph, false);
    btns[i].nextElementSibling.addEventListener('mouseout', hideParagraph, false);
}

function showDetails() {
    this.nextElementSibling.style.display = "inline-block";
}

function hiddenDetails() {
    this.nextElementSibling.style.display = "none";
}

function showParagraph () {
    this.style.display = "inline-block";
}

function hideParagraph () {
    this.style.display = "none";
}

HTML ：

<div>
        <button class="get-info">Hover</button>
        <p class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, repellat, dicta perferendis unde reiciendis quisquam consectetur consequatur ad debitis nihil possimus voluptates cupiditate culpa. Nobis quibusdam necessitatibus quis eveniet ratione.
        </p>
    </div>
    <div>
        <button class="get-info">Hover</button>
        <p class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, repellat, dicta perferendis unde reiciendis quisquam consectetur consequatur ad debitis nihil possimus voluptates cupiditate culpa. Nobis quibusdam necessitatibus quis eveniet ratione.
        </p>
    </div>

CSS ：

div {
    width: 22%;
    height: 10em;
    float: right;
    display: inline-block;
    background-color: #f0f0f0;
    margin-left: 2.5%;
    margin-bottom: 4.5%;
    position: relative;
}

.get-info {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid #ccc;
    background-color: #FF4136;
    width: 60px;
    padding: 10px 0;
    font-weight: bold;
    font-size: 0.9em;
    letter-spacing: 1px;
    color: #f0f0f0;
}
.get-info:hover {
    cursor: pointer;
}

.info {
    display: none;
    width: 300px;
    background-color: #fff;
    font-family: Helvetica;
    font-weight: none;
    padding: 30px;
    border: 1px solid #ccc;
    position: absolute;
    right: -30%;
    top: 32px;
    overflow: hidden;
    z-index:100000;
    color:#666;
    font-weight:bold;
    line-height: 1.4em;
}

上面的代码完美无缺，但我想添加此功能：工具提示应该在右侧显示最后的元素，例如当我将鼠标悬停在第一个按钮上时，它看起来像这样： enter image description here

但是对于最后一个元素，因为您可以看到工具提示没有完全显示： enter image description here
我怎么能处理，我知道我应该偏离窗口，但我不确定 提前致谢

Answer 1

检查元素在视口中是左侧还是右侧。
如果元素位于左侧，则显示右侧弹出窗口，否则左侧显示弹出窗口

选中此fiddle

您可以使用以下函数计算悬停元素的位置

function getPosition(element) {
   var xPosition = 0;
   var yPosition = 0;

   while (element) {
       xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
       yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
       element = element.offsetParent;
   }
   return {
       x: xPosition,
       y: yPosition
   };
}

使用此修改您的showDetails()功能，如下所示：

function showDetails() {
   var ww = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); //width of the window
   var pos = getPosition(this); //position of the hovered element relative to window
   var ew = this.offsetWidth; //width of the hovered element

   if (pos.x > (ww / 2)) { //element is on right side of viewport
       this.nextElementSibling.style.left = '-'+(ww- (pos.x-ew)) + 'px';
   } else { //element is on left side of viewport
       this.nextElementSibling.style.left = (pos.x + ew) + 'px';
   }

    this.nextElementSibling.style.display = "inline-block";
}

Answer 2

我的解决方案有两个小部分：

检测到DIV的左侧位置
如果左侧位置小于零（即偏离文档的一侧），请将其向右移动与左侧相同的像素数

<强> See my jsfiddle demo here

首先计算div相对于整个文档的左侧位置的函数：

function getOffsetLeft( elem ) {
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

然后调整你的showDetails函数来使用这个值：

function showDetails() {
    target = this.nextElementSibling;
    target.style.display = "inline-block";
    var myLeft = getOffsetLeft(target);
    if(myLeft < 0) {
        target.style.right = myLeft + "px";        
    }
}

检测元素是否落在屏幕右侧

2 个答案: