javascript - 一旦元素扩展到视口(viewport)之外，如何告诉它改变它的位置？

Question

我在所有按钮上都附有一些漂亮的描述框，请参见图片编号 0。 当我更改视口(viewport)大小时，描述框会扩展到视口(viewport)之外。见第一张图

显然，这是因为我将所有绝对定位的描述框的位置设置为相同(顶部:-25px 右侧:-79px)，当用户将鼠标悬停在最右侧的按钮上时，它会扩展得太远。我可以更改最右边的那个，但它不会解决任何问题，因为我不知道网站完成后会添加多少这些图片。

所以我想使用 javascript 更改任何扩展到视口(viewport)之外的描述框的位置，使其看起来像第二张图片中的那个。

我用于此设置的代码在这里:

<div id="grid-container" class="container">
  <div id="product1" class="products">
    <input id="one" type="checkbox" name="wobblers" value="one">

    <label for="one">
                            <img id="one" src="https://cdn.shopify.com/s/files/1/1557/0907/products/product-image-507865262.jpg?v=1527268422"
                                alt="rapala">
                            <button id="product1-info" class="btn btn-info">info
                                <div class="info-box" id="info-box1"></div>
                            </button>
                        </label>
  </div>
</div>

CSS:

img {
  width: 75px;
}

.info-box {
  display: none;
  width: 80px;
  height: 60px;
  background: grey;
  position: absolute;
  top: -25px;
  right: -79px;
  border-radius: 10% 10% 10% 1%;
}

#product1-info:hover #info-box1 {
  display: block;
}

.products {
  display: inline-block;
}

label {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

#grid-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

谢谢!

Answer 1

function changeElementPosition() {
    const tooltipParent = document.getElementById('product1-info');
    const tooltip = document.getElementById('info-box1');
    const tooltipParentRightPosition = tooltipParent.getBoundingClientRect().right;
    const windowWidth = document.documentElement.clientWidth;
    const tooltipInitPosition = -tooltip.getBoundingClientRect().width;

    if ((tooltipParentRightPosition - windowWidth) >= tooltipInitPosition) {
        tooltip.style.right = tooltipParentRightPosition - windowWidth + 'px';
    }

    window.addEventListener("resize", () => {
        const tooltipParent = document.getElementById('product1-info');
        const tooltip = document.getElementById('info-box1');
        const tooltipParentRightPosition = oltipParent.getBoundingClientRect().right;
        const windowWidth = document.documentElement.clientWidth;
        const tooltipInitPosition = -tooltip.getBoundingClientRect().width;

        if ((tooltipParentRightPosition - windowWidth) >= tooltipInitPosition) {
            tooltip.style.right = tooltipParentRightPosition - windowWidth + 'px';
        }
    });
}




<div id="grid-container" class="container">
    <div id="product1" class="products">
        <label for="one">
            <input id="one" type="checkbox" name="wobblers" value="one">
        </label>
        <img>
        <div class="btn-wrapper">
            <button id="product1-info" class="btn btn-info">info</button>
            <div class="info-box" id="info-box1"></div>
        </div>
    </div>
</div>

还有 CSS 的一些变化

.btn-wrapper {
    display: inline-block;
    position: relative;
}
.info-box {
    visibility: hidden;
    width: 80px;
    height: 60px;
    background: grey;
    position: absolute;
    top: -60px;
    right: -80px;
    border-radius: 10% 10% 10% 1%;
}

#product1-info:hover + #info-box1 {
    visibility: visible;
}

希望对你有帮助