自分のツールチップのjqueryプラグインを作成する - マウスと比べて、マウスの位置を知る方法は？

Question

okが、基本的に私は2つの機能作られた：ショーのツールチップと非表示ツールチップを、それがAJAX configまたは簡単な設定を取得することができ、私はあなたを示しています。

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

そして、これは、スクリプト

<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それは正常に動作しますが、問題はそれが私はそれは相対的なマウスに、ではない、スクロールしたいことだ

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

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

のように...

に見えます

ツールチップをマウスの位置に相対的にしたいのですが、それはできますか？私が知っている

は

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

と

function(evt){} 

とは何かを持っているが、私は...それを結合する方法がわからない：S はありがとうございました！

Answer 1

トニー、

は、ここに私自身のウェブサイト上のJavaScriptからいくつかの非常に単純なツールチップのコードです。ツールチップをカーソルに対して相対的に配置します。おそらくあなたはそれに応じてあなたを修正することができます。

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

ツールチップ自体は、次のとおり

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

それのためのCSSがある：

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

}

よろしくニール