0

AjaxControlToolkitの HoverMenuExtenderに相当する jQuery を作成しようとしています。これにより、要素にカーソルを合わせると、状況依存のヘルプを含む div を表示できます。

ページが最初にロードされたときにこれを機能させることができます (マウスが最初のヘルプ記号の上に置かれています)。
ここに画像の説明を入力

しかし、ページが下にスクロールされると、div は垂直スクロールの量だけオフセットされます (おそらく、水平スクロールがあれば右にも移動します) (マウスはまだ最初のヘルプ記号の上に置かれています): ここに画像の説明を入力

私のjQueryは次のとおりです。

$('.hoverHelpAnchor').hover(function (e)
{
    $(this).next().show().css('left', e.pageX).css('top', e.pageY);
}
, function ()
{
    $(this).next().hide();
});

CSS は次のとおりです。

.hoverHelp
{
    display: none;
    background-color: White;
    border-style: solid;
    border-width: thin;
    border-color: Black;
    width: 200px;
    z-index: 10000;
    position: fixed;
    margin: 2;
}

私のマークアップは次のとおりです。

<img src="@Url.Content("~/Content/images/help.png")" class="hoverHelpAnchor" alt="" />
<div class="hoverHelp">
     Project Name help blah blah blah very very very very very very very very long string that I want to word-wrap
</div>

divがオフセット位置に表示されないように、ページのスクロールを説明するために欠けているものを誰かが指摘できれば幸いです。

4

3 に答える 3

2

私はそれを理解したと思います

ホバーが発生した要素の位置を取得し、同じ位置またはその周辺にツールチップを表示します 

  $('.hoverHelpAnchor').hover(function (e)
    {
        var pos = $(this).position();
        $(this).next().show().css('position', 'absolute').css('left', pos.left).css('top', pos.top);
    }
    , function ()
    {
        $(this).next().hide();
    });
于 2012-07-04T09:40:18.390 に答える
1

要素の配置が問題を引き起こしています。おそらく絶対に配置したいでしょう。

于 2012-07-04T09:36:59.897 に答える
0

ホバー ヘルプ ボックスをクエスチョン マーク ボックスの内側に完全に配置し、そこから配置する必要があります。

:hoverヘルプ要素を非表示にしてから、疑問符の上にあるときにその中のツールチップを再表示することにより、CSS を使用してこれを完全に行うこともできます。

これは私が作成したばかりの例ですJSFIDDLE

于 2012-07-04T09:33:30.023 に答える