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

Question

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

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

我知道CSS需要是什么；我遇到的问题是检测部分。我见过 few questions相似，但解决方案都涉及使用原型(prototype)或 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);
}​

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