javascript - 如果与图像相关联的定位提示会延伸到左侧，如何将其向右微移？

Question

我在尝试让一些帮助文本与“?”相关联时遇到问题图像水平放置适当。虽然它在大多数情况下都像我希望的那样工作，但当“？”出现时移动到离屏幕左侧太近(要么是因为“？”一开始就靠近左侧，要么宽度减小将它包裹在那里)，帮助被切断

我喜欢它出现在一个 15rem 宽的盒子中，它需要多高，位于“？”的上方并延伸到“？”的左侧，并且在悬停或单击时可见。这很好用。

我想不通的是如何尽可能多地将帮助向右移动，以避免它在必要时从屏幕左侧延伸 .

我已经在靠近左侧的提示中添加了另一个类(未显示)，将它们向右而不是向左扩展。然而，这不是一个好的解决方案，依赖于我找到它们，并且不能很好地处理窗口大小调整。

我目前拥有的是:

HTML 和 CSS:

.tooltip {
    position: relative;
}

.tooltip > img {
    vertical-align: middle;
    margin-left: 0.5rem;
    height: 20px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 0.5rem;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    width: 15rem;
    right: 0;
    margin-right: 1rem;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext, .tooltip:active .tooltiptext {
    visibility: visible;
    opacity: 1;
}

<div>
    <input type="text" name=xx size="40" placeholder="xxxxxx">
    <span class="tooltip">
        <img src="static/help.png" alt="help">
        <span class="tooltiptext">Some help text for this.</span>
    </span>
</div>

我猜关键是动态确定工具提示文本的位置并相应地向左/向右调整，但我不知道该怎么做。我仅限于 CSS 和 JS(即不是 JQuery)。

感激地接受任何帮助。谢谢，克里斯

Answer 1

这里不是很好的解决方案，但它给了你一些有用的想法。

let tooltips = document.querySelectorAll('.tooltip');

[].forEach.call(tooltips, (el) => {
    el.addEventListener('mouseover', showTooltip, this);
});

function setDefaultPosition(element) {
    element.style.top = 'auto';
    element.style.right = 'auto';
    element.style.bottom = 'auto';
    element.style.left = 'auto';
}

function showTooltip(event) {
    let tooltip = event.currentTarget.querySelector('.tooltiptext')
    setDefaultPosition(tooltip);
    let {top:bodyTop, right:bodyRight, bottom:bodyBottom, left:bodyLeft} = document.body.getBoundingClientRect();
    let {top:tooltipTop, right:tooltipRight, bottom:tooltipBottom, left:tooltipLeft} = tooltip.getBoundingClientRect();

    if (bodyTop < tooltipTop) {
        tooltip.style.top = '100%';
    }
    if (bodyBottom < tooltipBottom){
        tooltip.style.bottom = '100%';
    }
    if (bodyRight < tooltipRight) {
        tooltip.style.right = '100%';
    } 
    if (bodyLeft > tooltipLeft){
        tooltip.style.left = '100%';
    }
};

Example here