3


0

ブラウザウィンドウ内にツールチップを保持しますか? (プラグインを使用せずに)

私のツールチップコードは次のとおりです。

HTML / CSS

a.tooltip span
{
    display: none;
    padding: 5px;
    border: 1px solid #000;
    background: #999;
    position: absolute;
    color: #fff;
    text-align: left;
}

[Help]This is the tooltip

jQuery:

 $('a.tooltip').hover(
        function(e) {
            $(this).children('span')
                .css('display', 'block')
                .css('width', '300px')
                .css('left', e.pageX + 10)
                .css('top', e.pageY + 10).show();
        },
        function() {
            $(this).children('span').hide();
        }
    ).click(function() {
        return false;
});

これにより、マウスの位置+ 10(XおよびY)にツールチップが表示されますが、ブラウザーの下部にツールチップがあり、十分に大きい場合(および変更できない大きなツールチップがある場合) 、ツールチップはブラウザウィンドウを超えて表示されるため、表示やスクロールが困難になります。 ツールチップがブラウザウィンドウを超えて表示され、それに応じて移動するかどうかを確認するにはどうすればよいですか?

1 Answer


2


本当にあなたの質問に対する答えではありませんが、すでに存在する優れたjQueryツールチッププラグインを使用してみませんか? 私のお気に入りはhttp://flowplayer.org/tools/demos/tooltip/dynamic.html[jQuery Tools]に含まれています。 http://flowplayer.org/tools/demos/tooltip/dynamic.html [この例]は、ビューポートのエッジへの近接度に基づいて動的に配置される実装を示しています。