将鼠标悬停在其上时显示元素而没有滚动偏移

Question

我试图从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不会出现在偏移位置。

Answer 1

我希望我能理解，对吧

获取悬停发生的元素位置，并在同一位置或周围某处显示工具提示

  $('.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();
    });

Answer 2

您对元素的定位会导致问题。您可能希望它位于absolute。

Answer 3

您需要将悬停帮助框完全放在问号框内，然后从那里放置。

你也可以通过隐藏帮助元素完全使用CSS，然后当:hover覆盖问号时取消隐藏工具提示。

以下是我刚刚制作JSFIDDLE

的示例