Question

I’m trying to write a jQuery equivalent of the HoverMenuExtender from the AjaxControlToolkit, so that when I hover over an element, I can display a div that contains some context-sensitive help.

I can make this work when the page first loads (mouse is hovering over the first help symbol):

but when the page is scrolled down, the div is offset by the amount of vertical scroll (and presumably if I had horizontal scroll it would move to the right too) (mouse is still hovering over the first help symbol):

My jQuery is:

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

CSS is:

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

and my markup is:

<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>

I’d be grateful if someone could point out what I’m missing in order to account for the page scroll so the div doesn’t appear in the offset position.

Answer 1

I hope I understood it, right

Get the Position of element where hovered occurred and show your tooltip on the same postion or somewhere around

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