1

私のシナリオはここで説明され、部分的に解決されていますjquery 1.3.2 を使用して作成された簡単なツールチップ HTML 要素をクリックした後に簡単なツールチップを表示したいです。ただし、私のページでは、ツールチップ (.tooltip) の html コードがページの別の場所 (下) にあります。クリックした html 要素のすぐ下に表示する必要があります。これまでのところ、コードは次のようになります。

$(document).ready(function(){

$('.somefield').click(showBox).mouseleave(hideBox);

function showBox(e){
    var x = e.pageX + 20;
    var y = e.pageY + 20;
    $('.tooltip').fadeIn();
    $('.tooltip').offset({ left: x, top: y });
}

function hideBox(){
    $('.tooltip').fadeOut();
}
});

そして、このような私のページで動作しますhttp://jsfiddle.net/HUG2Z/15/ jquery 1.3.2でマウスクリックのすぐ下に表示するにはどうすればよいですか? どうもありがとうございました。

4

2 に答える 2

1

ツールチップを絶対位置に配置し、呼び出しをoffset()に変更するだけですcss()

なぜ と に 70 を足すpageXのpageYですか? そのようなマウスでは正しくありません。

http://jsfiddle.net/HUG2Z/22/

$(document).ready(function(){

    $('.somefield').click(showBox).mouseleave(hideBox);

    function showBox(e){
        $('.tooltip').fadeIn().css(({ left: e.pageX, top: e.pageY }));
    }

    function hideBox(){
        $('.tooltip').fadeOut();
    }
});

CSS

.tooltip {
    margin:10px;
    padding:12px;
    border:2px solid #666;
    width:60px;
    position: absolute;
    display: none;

}
于 2012-11-16T19:57:14.143 に答える
0

コードの更新は次のとおりです。

http://jsfiddle.net/HUG2Z/19/

最も重要なことはここで起こります:

.tooltip {
    margin:10px;
    padding:12px;
    border:2px solid #666;
    width:60px;
    **position: absolute;**
    display: none;
}

そしてここ

$('.tooltip').css({ left: x, top: y });

まず、ツールチップを絶対位置に配置して、通常のボックス モデルの外側で実行し、どこにでも配置できるようにする必要があります。デフォルトでは、ほとんどの要素の位置は静的であるため、属性 left と top は機能しませんでした。jQuery で操作を開始する前に、ポジションのトピック全体 (実際にはそれほど複雑ではありません) をもう少し深く掘り下げる必要があります。

于 2012-11-16T19:58:27.417 に答える