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

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

我曾经抱怨过，在分辨率较低的屏幕上，元素最右边一栏中项目的工具提示会在屏幕外运行。因为我不知道创建父项时父项的位置，所以我需要一种方法来检测（在鼠标实际移动之前）工具提示div在显示时将部分脱离屏幕，并相应地更改css

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

---

有什么建议吗？

这里是我在JSFIDLE上做的一个快速演示：

HTML:

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

var-tip；
$（'p'）。悬停（函数（）{
$（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.width（）/2
});
如果（tip.offset（）.left<0）tip.offset({
左：0
});
如果（tip.offset（）.left+tip.width（）>$（'body'）.width（））{
尖端偏移量({
左：$（'body'）.width（）-（tip.width（））
});
}
}，函数（）{
$（this.css（'color'，''）；
$（提示）。删除（）；
});
函数createToolTip（文本，x，y）{
返回$（''）.addClass（'toolTip'）.css（'left'，x）.css（'top'，y）.text（text）；
}​

---

它不是完美的代码，也不是与工具提示相同的想法，但希望它能回答关于在屏幕上保留项目的问题。

每个元素都有一个相对于其父元素的偏移量，每个元素都有一个计算宽度（例如，其在显示上的大小）。得到这些，找出元素的右边缘相对于显示器右边缘的位置，如果它离开屏幕，就把它推到左边。我也有类似的问题。我最近一直在jQueryUI中胡闹，但到目前为止还没有运气。如果查看该链接上的示例，您会注意到将橙色div移出视图会将其子div推到右侧。非常类似于您和我正在寻找的…@fastrack-我在我链接的一个问题中看到了该示例，但它使用了jqueryUI。正如我所说，我仅限于核心jquery——没有UI，没有插件。谢谢，但我不确定这对我有什么帮助。根据元素的偏移+宽度是否大于主体元素的宽度来确定元素是否在屏幕外。问题是：如果body元素在CSS中设置为900px，那么body width在javascript中总是返回900px，即使屏幕分辨率设置为只有600px在不滚动的情况下实际可见。我需要一种方法来确定一个元素在屏幕上是否可见，而不是技术上它是否在body元素中。通常，如果您希望页面具有这样的设置宽度，您可以将所有页面内容以某种形式包装在一个页面包装div中，如果您希望它在页面上水平居中，则自动提供宽度和边距。

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

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