2

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

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

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

那里有任何指示吗？

4

1 回答 1

0

这是我放在 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);
}​

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

于 2012-12-10T17:27:37.263 回答