Indem ich Tooltip jQuery-Plugin - in Bezug auf die Maus, wie Sie wissen, wo die Maus ist?

Question

ok, im Grunde gemacht i 2 Funktionen: anzeigen Tooltip und verstecken Tooltip, und es kann Ajax Config oder einfache Konfiguration, ich Ihnen zeigen:

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

Und das ist das Script

<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 sieht aus wie

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

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

Es funktioniert gut, aber das Problem ist es, dass ich will es in Bezug auf die Maus nicht auf die Scroll ...

würde ich den Tooltip mag die Mausposition relativ zu sein, kann ich das tun?

ich weiß, hat etwas mit dem zu tun

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

und

function(evt){}

, aber ich weiß nicht, wie es zu kombinieren ...: S danke!

Answer 1

Tony,

Hier einige sehr einfache Tooltip-Code von Javascript auf meiner eigenen Website. Er positioniert den Tooltip relativ zu dem Cursor. Vielleicht können Sie Ihr entsprechend ändern.

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

Der Tooltip selbst ist:

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

Die CSS für sie ist:

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

}

Viele Grüße Neil