如何使用Jquery獲取鏈接標題信息？

Question

我有這樣的表格（如下）。如果有人將鼠標光標放在此名稱上，我想獲取某人的詳細信息。例如，如果有人將光標放在姓名「John」上，則將向他顯示「位置：美國，性別：男性，城市：洛杉磯」這一信息。我怎麼用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/

您創建包含您提示一個固定的元素。將鼠標懸停在行/單元格上可以顯示它。當你mouseout - 隱藏它。非常簡單。

現在它是一個小錯誤，因爲如果你鼠標懸停工具提示，它會導致隱藏代碼觸發。您可能希望將其從鼠標懸停切換到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/