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 に答える