Jqueryでリンクのタイトル情報を取得するには？

Question

私はそのようなテーブルを持っています（下記）。誰かがこの名前の上にマウスカーソルを持っていると、誰かの詳細情報を取得したい。たとえば、 "John："という名前の上にカーソルを置くと、 "Location：USA、Sex：Male、City：Los angeles"という情報が表示されます。 jQueryを使ってどうすればいいですか？

<table cellspacing="0" cellpadding="2" border="1" width="100%" class="tariff_table"> 
<tbody> 
<tr> 
<td width="150" valign="top" class="title_td"> 
<strong>Name</strong></td> 
<td valign="top" class="title_td"> 

<strong>Surname</strong><strong></strong> 
<p></p></td> 
<td valign="top" class="title_td"> 

<strong>Middle Name </strong></td> 
</tr> 
<tr> 
<td valign="top"> 

John</td> 
<td valign="top"> 

Locaste</td> 
<td valign="top"> 

Sawqa</td> 
</tr> 
<tr> 
<td valign="top"> 

Jafde</td> 
<td valign="top">Saqzw</td> 
<td valign="top"> 

Porda</td> 
</tr> 
</tbody></table> 

Answer 1

参照してください。

http://jsfiddle.net/8yQGW/2/

あなたのツールヒントが含まれている固定要素を作成します。行/セルの上にマウスを置くと、そのセルが表示されます。あなたがマウスアウトしたときにそれを隠す。かなり簡単。

現在、ツールチップをマウスオーバーすると非表示のコードが発生するため、少しバグがあります。ホバーからmousemoveに切り替えて、ツールチップをカーソルの後ろに置いておきたい場合があります。あなたは私があなたの意図を推測しようとしないので、あなたは指定しなかった。

$('td').hover( 
    function(e) { 
     console.log(e.clientX + ' : ' + e.clientY); 
     $('.tooltip').html($(this).html()).css({ top: e.clientY + 15, left: e.clientX + 15 }).fadeIn('fast'); ; 
    },  
    function(e) { $('.tooltip').fadeOut('fast'); } 
); 

Answer 2

あなたがこれを探しているかもしれません。これは、いくつかの調整が必要ですが、それはあなたが望むものを基本的にdemo

http://pupunzi.open-lab.com/2009/02/07/mbtooltip/