Question

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

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

这是一个JSFiddle示例：http://jsfiddle.net/cEqz6/1/

HTML

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

CSS

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

.absolute-div，必须始终在.view-port

中

Answer 1

通常，您知道工具提示应出现的位置（通常是鼠标位置）。从那里，您可以添加工具提示的宽度，并查看它是否从视口的右侧掉落。

如果是这种情况，您可以应用一些CSS，也许可以添加一个＆＃34;工具提示右键＆＃34; class，它使工具提示出现在目标位置的另一侧。

如果工具提示看起来太远，从视口底部掉下来，则可以应用类似的原则。

保持视图端口内的绝对元素水平

1 个答案: