Mostrar un elemento al pasar el cursor sobre él sin un desplazamiento de desplazamiento

Estoy tratando de escribir un jQuery equivalente de la HoverMenuExtender de AjaxControlToolkit, de modo que cuando paso el mouse sobre un elemento, puedo mostrar un div que contiene alguna ayuda sensible al contexto.

Puedo hacer que esto funcione cuando la página se carga por primera vez (el mouse está sobre el primer símbolo de ayuda):
enter image description here

pero cuando la página se desplaza hacia abajo, el div se compensa con la cantidad de desplazamiento vertical (y, presumiblemente, si tuviera un desplazamiento horizontal, también se movería hacia la derecha) (el mouse aún se encuentra sobre el primer símbolo de ayuda): enter image description here

Mi jQuery es:

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

CSS es:

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

y mi marcado es:

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

Estaría agradecido si alguien pudiera señalar lo que me falta para tener en cuenta el desplazamiento de la página para que el div no aparezca en la posición de desplazamiento.

preguntado el 04 de julio de 12 a las 10:07

Tal vez pueda tener una pista de la posición jquery-ui aunque no esté usando jquery-ui jqueryui.com/demos/position/#default -

3 Respuestas

espero haberlo entendido, verdad

Obtenga la Posición del elemento donde ocurrió el desplazamiento y muestre su información sobre herramientas en la misma posición o en algún lugar alrededor

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

Respondido 04 Jul 12, 10:07

Su posicionamiento del elemento está causando problemas. Probablemente lo quieras posicionado fotometría absoluta).

Respondido 04 Jul 12, 10:07

Deberá hacer que el cuadro de ayuda flotante se coloque absolutamente dentro del cuadro del signo de interrogación y luego colocarlo desde allí.

También puede hacer esto completamente usando CSS ocultando el elemento de ayuda y luego cuando :hover sobre el signo de interrogación mostrar información sobre herramientas dentro de él.

Aquí hay un ejemplo que acabo de hacer. JSFDDLE

Respondido 04 Jul 12, 10:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.