Haciendo mi propia información sobre herramientas jQuery Plugin - en relación con el ratón, cómo saber dónde está el ratón?

Question

ok, básicamente me hizo 2 funciones: Mostrar información sobre herramientas y ocultar información sobre herramientas y se puede conseguir ajax configuración o configuración sencilla, sólo se mostrará:

    <style type="text/css">

    .nube{display:none; height:auto; width:auto; position:absolute; z-index:99; left:200px;
          background-color:#fff;
          color:#999; border:1px solid #EEE; padding:20px; padding-top:10px; padding-bottom:10px;
-moz-border-radius-bottomleft: 0em;
    -webkit-border-bottom-left-radius: 0em;
-moz-border-radius-bottomright: 0.8em;
    -webkit-border-bottom-right-radius: 0.8em;
-moz-border-radius-topright: 0.8em;
    -webkit-border-top-right-radius: 0.8em;
-moz-border-radius-topleft: 0.8em;
    -webkit-border-top-left-radius: 0.8em;
}

</style>

Y este es el guión

<script type="text/javascript">

function mostrar_tooltip(div,contenido,ajax){
    /// for now this 'if' is returns false allways so the last line its executed only
    if(contenido != ''){
    if(ajax == 0){
        // entonces no hay que
        $('#'+div).load('#'+contenido);
    }else{
        // contenido contiene la palabra clave a enviar a router
        $('#'+div).load('./router.php?que=tooltip&clave='+contenido);
    }
    // ya tenemos el contenido en el div (esta oculto y posicionado con CSS
    }
    $('#'+div).css({position:'fixed', top:($(window).scrollTop()+200)+"px", left:"200px"})
    $('#'+div).fadeIn(300);

}

function ocultar_tooltip(div){
    $('#'+div).fadeOut(100);
}


</script>

HTML se parece a

 <span class="nube" id="tip"> TIP HERE </span>

<p onmouseover="mostrar_tooltip(tip,'',0)" onmouseout="ocultar_tooltip(tip)"> HOVER ME </p>

Se trabaja muy bien, pero el problema es que lo quiero en relación con el ratón, no al desplazamiento ...

Me gustaría que la información de herramienta que es relativa a la posición del ratón, puedo hacer eso?

Sé que tiene algo que ver con

  .css({top:evt.pageY, left:evt.pageX})

y

function(evt){}

pero no sé cómo combinar lo ...: S gracias!

Answer 1

Tony,

Aquí hay alguna información sobre herramientas muy simple código de javascript en mi propio sitio web. Posiciona la información de herramienta con relación al cursor. Tal vez se puede modificar la suya en consecuencia.

$(slide).hover(
  function(event){
    $('#tooltip').css({position: 'absolute', top: (event.pageY - 10), left: (event.pageX + 20)}).show("fast");      
  },
  function(){
     $(tooltip).hide("fast");
  }
 );

La descripción en sí es:

<div id='tooltip'>Right-click to download</div>

El css para ello es:

#tooltip{
display: block;
position: absolute;
z-index: 9999;
border: 2px solid: #000;
background: #fff;
color: #000;
padding: 3px 6px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;

}

Saludos Neil