Jquery 将绝对元素水平放置在视图端口内

我有一个绝对定位的工具提示元素，单击时弹出。但是，在某些情况下，此元素可能会向右移动过远，并向页面添加水平滚动。我的想法是始终将其水平放置在视图端口内

就像你在使用Windows，右键点击屏幕上的任何地方，就会弹出一个菜单。它通常显示在鼠标光标的右下角，但是如果在屏幕的右下角执行此操作，则菜单将显示在光标的左上角

下面是一个JSFIDLE示例：

HTML

---

.absolute div必须始终位于内部。查看端口通常，您知道工具提示应显示的位置（通常是鼠标位置）。从那里，可以添加工具提示的宽度，并查看它是否从视口的右侧脱落

如果是这种情况，那么您可以应用一些CSS，或者添加一个“tooltip right”类，这会导致工具提示显示在目标位置的另一侧

---

如果工具提示显示得太低，从视口底部脱落，则可以应用类似的原则。

是否使用Javascript显示工具提示？您是否使用Javascript计算位置？如果是：为什么不通过适当的计算来避免这种情况？如果工具提示有一个硬编码位置，使用

right:0

对

absolute

定位元素进行硬编码可能会有所帮助（在我看来，对于右侧有足够空间的屏幕来说，这不会造成伤害）。这确实有帮助。因为我的工具提示弹出在文章的右下角，所以用right:0定位它们并添加一个与文章宽度相等的最大宽度（这样它们就不会在左边走得太远）是个不错的主意！谢谢这是一个非常好的主意，可能会奏效，但是@try catch最终给了我一个不错的选择，因为我的代码已经被javascript填满了，所以不使用JS来修复这个问题有点轻松。无论如何谢谢你！

<div class="view-port">
    <div class="div-holder">
        <div class="absolute-div">
        </div>
    </div>
</div>

body {
    padding: 0;
    margin: 0;
}
.view-port {
    width: 1000px;
    height: 600px;
    background: #f5f5f5;
    overflow: auto;
}
.div-holder {
    position: relative;
    padding: 10px;
    background: #dadada;
    width: 300px;
    min-height: 50px;
    left: 500px
}
.absolute-div {
    position: absolute;
    background: #333;
    width: 600px;
    padding: 10px;
}