jQueryツールチップ - follow mouse

Question

私はdivの上にマウスを置いたときにマウスの後ろに "ツールチップ"を追加するはずのコードを使っています。 （これは8つのdivの3つのセットにこれを行うことになっています）

ツールチップの内容は、「。li」の内側にあり、「.hover」と「.mousemove」が添付されています。

ここでは、私が達成しようとしているものの「実例」を見ることができます。 （まだ開発中ですが、赤いバーをホバリングするとツールチップが表示されます）。

http://staging2.e2e.be/ciber4/15-werfzones--de-werven-op-een-rij/zoek-op-planning

は基本的に、私はちょうど赤いブロック相対するツールチップを必要とし、本体に対してではありませんか？

また、対応するコードでフィドルを作成しました。

http://jsfiddle.net/JDST8/

Answer 1

あなたはバーのX/YのCOORDSを取得するために$(selector).position()を使用することができます。要素の全ページオフセットを含む「上」キーと「左」キーを持つオブジェクトを返します。ここで

は、実施例とフィドルです：http://jsfiddle.net/xJSMu/

PS： あなたは、xとyを得ましたが、あなたのフィドルで間違った方法ラウンドオフセット - とにかく名前でを。

PPS： セレクタキャッシュを追加しました。（経験則：複数回使用する場合は、jQueryコンストラクタを再度呼び出す代わりにキャッシュします）。

Answer 2

HTML

<div id="tooltipWindow" class="tooltipContainer"> 
    <div></div> 
</div> 

CSSが

<style> 
    .tooltipContainer { 
     position: fixed; 
     height: auto; 
     width: auto; 
     background: ghostwhite; 
     padding: 10px; 
    } 
</style> 

を（あなたが望むように私はまた、ツールチップのdivに取り付けた要素のクラスが追加されている下のスクリプトでは、スタイルを追加します）

JAVASCRIPT（jQuery、dont fo jQueryライブラリを含むように目標確認、私はインクルードは同様にタグを含める追加されている）

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script> 
<script> 
    //Following Tooltip 
    $('.elementClassName').mousemove(function(e) { 
     if ($(this).attr('title') != "") { 
      $('#tooltipWindow div').html($(this).attr('title')); 
      $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class')); 
      $('#tooltipWindow').show(); 
     } 
    }); 
    $('.elementClassName').mouseleave(function (e) { 
     $('#tooltipWindow').hide(); 
     }); 
    } 

    //Non Following Tooltip 
    $('.elementClassName').hover(function(e) { 
     if ($(this).attr('title') != "") { 
      $('#tooltipWindow div').html($(this).attr('title')); 
      $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class')); 
      $('#tooltipWindow').show(); 
     } 
    },function (e) { 
     $('#tooltipWindow').hide(); 
     }); 
    } 

</script>