Question: I'm trying to write a jQuery equivalent of the [HoverMenuExtender](http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HoverMenu/HoverMenu.aspx) 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):  

![enter image description here](https://i.stack.imgur.com/dMqiv.png)

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):
![enter image description here](https://i.stack.imgur.com/2K2YU.png)

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: 
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();
    });

```
You will need to make the hover help boxed positioned absolutely inside the question mark box and then position it from there.

You can also do this entirely using CSS by hiding the help element and then when you `:hover` over the question mark unhide tooltip inside it.

Here is an example I just made [JSFIDDLE](http://jsfiddle.net/42Ugz/2/)