如何动态更改在屏幕外运行的元素的 css 以使其保持在屏幕上？

Question

我有一个鼠标悬停工具提示。它存在于多个页面元素上（动态生成，所以我永远不知道会有多少或它们的位置。）

我抱怨说，在分辨率较低的屏幕上，最右侧元素列中的项目的工具提示会跑出屏幕。由于我不知道创建父项时的位置，因此我需要一种方法来检测（在鼠标悬停实际发生之前）工具提示 div 在显示时将部分在屏幕外，并相应地更改 css。

我知道 css 需要是什么；我遇到的问题是检测部分。我见过类似的fewquestions，但解决方案都涉及使用原型或jquery插件。我仅限于这个项目的核心 jquery（或只是普通的 javascript）。

有什么建议吗？

Answer 1

这是我在 jsFiddle 上整理的一个快速演示：http://jsfiddle.net/2gGrd/

HTML：

<p class="left">Left</p>
<p class="center">Center</p>
<p class="right">Right</p>​

CSS：

p {
    position: absolute;
    top: 50%;
}

.left {
    left: 0;
}

.center {
    left: 50%;
}

.right {
    right: 0;
}

.toolTip {
    width: 100px;
    height: 25px;
    background: red;
    color: green;
    position: absolute;
}

JavaScript：

var tip;

$('p').hover(function() {
    $(this).css('color', 'red');
    var xpos = $(this).width() / 2 + $(this).offset().left;
    var ypos = $(this).height() / 2 + $(this).offset().top;
    tip = createToolTip('thing', xpos, ypos);
    $(this).parent().append(tip);
    tip.offset({
        left: tip.offset().left - tip.width() / 2
    });
    if (tip.offset().left < 0) tip.offset({
        left: 0
    });
    if (tip.offset().left + tip.width() > $('body').width()) {
        tip.offset({
            left: $('body').width() - (tip.width())
        });
    }
}, function() {
    $(this).css('color', '');
    $(tip).remove();
});

function createToolTip(text, x, y) {
    return $('<div />').addClass('toolTip').css('left', x).css('top', y).text(text);
}​

这不是完美的代码，也不是您对工具提示的想法，但希望它回答了有关将项目保持在屏幕上的问题。